最近公司要求用vue重構項目，還涉及到模塊化開發，于是乎，我專門花了幾天的時間研究了一下webpack這個目前來看比較熱門的模塊加載兼打包工具，發現上手并不是很容易，現將總結的一些有關配置的心得分享出來，歡迎大神來拍磚。。。
一、新建一個項目目錄，cd /d 定位進去，然后輸入npm init，會提示你填寫一些項目的信息，一直回車默認就好了，或者直接執行npm init -y 直接跳過，這樣就在項目目錄下生成了一個package.json文件。
二、接下來就是通過npm安裝項目依賴項，命令行輸入：npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev ，繼續輸入npm install vue@^1.0.26 --save 。
這里注意的幾個點如下：
1.需要安裝的依賴項視具體的項目需求來定，我只是安了幾個必需的，后期會再加；
2.輸入之后如果一直報錯或者光標一直在轉動，要么是npm版本太低(需要3+)，要么將npm改成cnpm，如果沒有安裝淘寶NPM鏡像，可以先輸入npm install -g cnpm --registry=https://registry.npm.taobao.org，接著輸入cnpm -v查看是否安裝完成，然后就可以使用cnpm來代替npm；
3.可以先修改package.json文件中的devDependencies和dependencies，然后再輸入npm install進行一次性安裝（偷懶的做法，嘿嘿）；
4.dependencies中的vue默認安裝2+，如果dependencies中的vue選擇^1.0.26，那么devDependencies中對應的vue-loader最好選擇^7.3.0，vue-hot-reload-api最好選擇^1.2.0，否則就會報錯；
5.dependencies中的vue-router默認安裝2+，無法識別router.map()這個方法，如果想要用回這個方法，最好選擇^0.7.13；
6.有時安裝一個依賴項，會提示還需要一并安裝別的依賴項，例如：如果要安裝bootstrap-loader，會提示要求安裝node-sass sass-loader resolve-url-loader；要安裝less-loader，會提示要求安裝less；
完成這一步之后，會在項目目錄下生成一個名node_modules的文件，對應的package.json文件中的內容變動如下（我額外添加了幾個依賴項）：
"devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.18.0", "babel-preset-stage-0": "^6.16.0", "babel-runtime": "^6.18.0", "css-loader": "^0.25.0", "debug": "^2.2.0", "express": "^4.14.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.24.1", "jquery": "^3.1.1", "less": "^2.7.1", "less-loader": "^2.2.3", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.2.3", "vue-loader": "^7.3.0", "webpack": "^1.13.3", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^1.16.2", "webpack-hot-middleware": "^2.13.1" }, "dependencies": { "vue": "^1.0.26", "vue-router": "^0.7.13" }三、在項目目錄下新建一個名為src的目錄，里面用于存放入口文件（index.js）、項目源文件（html,css,js,img之類的）、組件（.vue后綴），我的src目錄結構大致如下：
src -entry -index.js -pages -components -css -img -js -index.html -public
當然，有輸入目錄，就有輸出目錄，即在項目目錄下新建一個output目錄，用于放置生產出來的各種資源文件。
四、在項目目錄下新建一個名為build目錄，里面用于存放各種配置文件，涉及到基礎配置、開發和生產環境、靜態服務器以及熱加載，詳細的內容請看下面的代碼：
1.webpack.config.js（基礎配置文件）
// 引入依賴模塊var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { // 入口文件，路徑相對于本文件所在的位置，可以寫成字符串、數組、對象 entry: { // path.resolve([from ...], to) 將to參數解析為絕對路徑 index:path.resolve(__dirname, '../src/entry/index.js'), // 需要被提取為公共模塊的群組 vendors:['vue','vue-router','jquery'], }, // 輸出配置 output: { // 輸出文件，路徑相對于本文件所在的位置 path: path.resolve(__dirname, '../output/static/js/'), // 設置publicPath這個屬性會出現很多問題： // 1.可以看成輸出文件的另一種路徑，差別路徑是相對于生成的html文件； // 2.也可以看成網站運行時的訪問路徑； // 3.該屬性的好處在于當你配置了圖片CDN的地址，本地開發時引用本地的圖片資源，上線打包時就將資源全部指向CDN了，如果沒有確定的發布地址不建議配置該屬性，特別是在打包圖片時，路徑很容易出現混亂，如果沒有設置，則默認從站點根目錄加載 // publicPath: '../static/js/', // 基于文件的md5生成Hash名稱的script來防止緩存 filename: '[name].[hash].js', // 非主入口的文件名，即未被列在entry中，卻又需要被打包出來的文件命名配置 chunkFilename: '[id].[chunkhash].js' }, // 其他解決方案 resolve: { // require時省略的擴展名，遇到.vue結尾的也要去加載 extensions: ['','.js', '.vue'], // 模塊別名地址，方便后續直接引用別名，無須寫長長的地址，注意如果后續不能識別該別名，需要先設置root alias:{} }, // 不進行打包的模塊 externals:{}, // 模塊加載器 module: { // loader相當于gulp里的task，用來處理在入口文件中require的和其他方式引用進來的文件，test是正則表達式，匹配要處理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要處理的目錄包括進來，exclude排除不處理的目錄 loaders: [ // 使用vue-loader 加載 .vue 結尾的文件 { test: //.vue$/, loader: 'vue-loader', exclude: /node_modules/ }, // 使用babel 加載 .js 結尾的文件 { test: //.js$/, loader: 'babel', exclude: /node_modules/, query:{ presets: ['es2015', 'stage-0'], plugins: ['transform-runtime'] } }, // 使用css-loader和style-loader 加載 .css 結尾的文件 { test: //.css$/, // 將樣式抽取出來為獨立的文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"), exclude: /node_modules/ }, // 使用less-loader、css-loader和style-loade 加載 .less 結尾的文件 { test: //.less$/, // 將樣式抽取出來為獨立的文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"), exclude: /node_modules/ }, // 加載圖片 { test: //.(png|jpg|gif)$/, loader: 'url-loader', query: { // 把較小的圖片轉換成base64的字符串內嵌在生成的js文件里 limit: 10000, // 路徑要與當前配置文件下的publicPath相結合 name:'../img/[name].[ext]?[hash:7]' } }, // 加載圖標 { test: //.(eot|woff|woff2|svg|ttf)([/?]?.*)$/, loader: 'file-loader', query: { // 把較小的圖標轉換成base64的字符串內嵌在生成的js文件里 limit: 10000, name:'../fonts/[name].[ext]?[hash:7]', prefix:'font' } }, ] }, // 配置插件項 plugins: [] }2.webpack.dev.config.js（開發環境下的配置文件）
// 引入依賴模塊var path = require('path');var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');// 引入基本配置var config = require('./webpack.config.js');// 必須修改原配置中網站運行時的訪問路徑，相當于絕對路徑，修改完之后，當前配置文件下的很多相對路徑都是相對于這個來設定；// 注意：webpack-dev-server會實時的編譯，但是最后的編譯的文件并沒有輸出到目標文件夾，而是保存到了內存當中config.output.publicPath = '/';// 重新配置模塊加載器config.module= { // test是正則表達式，匹配要處理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要處理的目錄包括進來，exclude排除不處理的目錄 loaders: [ // 使用vue-loader 加載 .vue 結尾的文件 { test: //.vue$/, loader: 'vue-loader', exclude: /node_modules/ }, // 使用babel 加載 .js 結尾的文件 { test: //.js$/, loader: 'babel', exclude: /node_modules/, query:{ presets: ['es2015', 'stage-0'], plugins: ['transform-runtime'] } }, // 使用css-loader、autoprefixer-loader和style-loader 加載 .css 結尾的文件 { test: //.css$/, // 將樣式抽取出來為獨立的文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"), exclude: /node_modules/ }, // 使用less-loader、autoprefixer-loader、css-loader和style-loade 加載 .less 結尾的文件 { test: //.less$/, // 將樣式抽取出來為獨立的文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"), exclude: /node_modules/ }, // 加載圖片 { test: //.(png|jpg|gif)$/, loader: 'url-loader', query: { // 把較小的圖片轉換成base64的字符串內嵌在生成的js文件里 limit: 10000, // 路徑和生產環境下的不同，要與修改后的publickPath相結合 name: 'img/[name].[ext]?[hash:7]' } }, // 加載圖標 { test: //.(eot|woff|woff2|svg|ttf)([/?]?.*)$/, loader: 'file-loader', query: { limit: 10000, // 路徑和生產環境下的不同，要與修改后的publickPath相結合 name:'fonts/[name].[ext]?[hash:7]', prefix:'font' } }, ] };// 重新配置插件項config.plugins = [ // 位于開發環境下 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"development"' } }), // 自動生成html插件，如果創建多個HtmlWebpackPlugin的實例，就會生成多個頁面 new HtmlWebpackPlugin({ // 生成html文件的名字，路徑和生產環境下的不同，要與修改后的publickPath相結合，否則開啟服務器后頁面空白 filename: 'src/pages/index.html', // 源文件，路徑相對于本文件所在的位置 template: path.resolve(__dirname, '../src/pages/index.html'), // 需要引入entry里面的哪幾個入口，如果entry里有公共模塊，記住一定要引入 chunks: ['vendors','index'], // 要把<script>標簽插入到頁面哪個標簽里(body|true|head|false) inject: 'body', // 生成html文件的標題 title:'' // hash如果為true，將添加hash到所有包含的腳本和css文件，對于解除cache很有用 // minify用于壓縮html文件，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符 }), // 提取css單文件的名字，路徑和生產環境下的不同，要與修改后的publickPath相結合 new ExtractTextPlugin("[name].[contenthash].css"), // 提取入口文件里面的公共模塊 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js', }), // 為組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，并為它們分配最小的ID new webpack.optimize.OccurenceOrderPlugin(), // 模塊熱替換插件 new webpack.HotModuleReplacementPlugin(), // 允許錯誤不打斷程序 new webpack.NoErrorsPlugin(), // 全局掛載插件 new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery" }) ];// vue里的css也要單獨提取出來config.vue = { loaders: { css: ExtractTextPlugin.extract("css") }};// 啟用source-map，開發環境下推薦使用cheap-module-eval-source-mapconfig.devtool='cheap-module-eval-source-map';// 為了實現熱加載，需要動態向入口配置中注入 webpack-hot-middleware/client ，路徑相對于本文件所在的位置// var devClient = 'webpack-hot-middleware/client';// 為了修改html文件也能實現熱加載，需要修改上面的devClient變量，引入同級目錄下的dev-client.js文件var devClient = './build/dev-client';// Object.keys()返回對象的可枚舉屬性和方法的名稱Object.keys(config.entry).forEach(function (name, i) { var extras = [devClient]; config.entry[name] = extras.concat(config.entry[name]);})module.exports = config;3.webpack.prod.config.js（生產環境下的配置文件）
// 引入依賴模塊var path = require('path');var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');// 引入基本配置var config = require('./webpack.config');// 重新配置插件項config.plugins = [ // 位于生產環境下 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), // 自動生成html插件，如果創建多個HtmlWebpackPlugin的實例，就會生成多個頁面 new HtmlWebpackPlugin({ // 生成html文件的名字，路徑相對于輸出文件所在的位置 filename: '../../html/index.html', // 源文件，路徑相對于本文件所在的位置 template: path.resolve(__dirname, '../src/pages/index.html'), // 需要引入entry里面的哪幾個入口，如果entry里有公共模塊，記住一定要引入 chunks: ['vendors','special','index'], // 要把<script>標簽插入到頁面哪個標簽里(body|true|head|false) inject: 'body', // 生成html文件的標題 title:'', // hash如果為true，將添加hash到所有包含的腳本和css文件，對于解除cache很有用 // minify用于壓縮html文件，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符 }), // 提取css單文件的名字，路徑相對于輸出文件所在的位置 new ExtractTextPlugin("../css/[name].[contenthash].css"), // 提取入口文件里面的公共模塊 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js', }), // 壓縮js代碼 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, // 排除關鍵字，不能混淆 except:['$','exports','require'] }), // 為組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，并為它們分配最小的ID new webpack.optimize.OccurenceOrderPlugin(), // 全局掛載插件，當模塊使用這些變量的時候，wepback會自動加載，區別于window掛載 new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery" }) ];// vue里的css也要單獨提取出來config.vue = { loaders: { css: ExtractTextPlugin.extract("css") }};// 開啟source-map，生產環境下推薦使用cheap-source-map或source-map，后者得到的.map文件體積比較大，但是能夠完全還原以前的js代碼config.devtool='source-map';// 關閉source-map// config.devtool=false;module.exports = config;4.dev-server.js（服務器配置文件）
// 引入依賴模塊var express = require('express');var webpack = require('webpack');var config = require('./webpack.dev.config.js');// 創建一個express實例var app = express();// 對網站首頁的訪問返回 "Hello World!" 字樣app.get('/', function (req, res) { res.send('Hello World!');});// 調用webpack并把配置傳遞過去var compiler = webpack(config);// 使用 webpack-dev-middleware 中間件，搭建服務器var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath, stats: { colors: true, chunks: false }})// 使用 webpack-hot-middleware 中間件，實現熱加載var hotMiddleware = require('webpack-hot-middleware')(compiler);// 為了修改html文件也能實現熱加載，使用webpack插件來監聽html源文件改變事件compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // 發布事件 hotMiddleware.publish({ action: 'reload' }); cb(); })});// 注冊中間件app.use(devMiddleware);app.use(hotMiddleware);// 監聽 8888 端口，開啟服務器app.listen(8888, function (err) { if (err) { console.log(err); return; } console.log('Listening at http://localhost:8888');})5.dev-client.js（配合dev-server.js監聽html文件改動也能夠觸發自動刷新）
// 引入 webpack-hot-middleware/client var hotClient = require('webpack-hot-middleware/client');// 訂閱事件，當 event.action === 'reload' 時執行頁面刷新hotClient.subscribe(function (event) { if (event.action === 'reload') { window.location.reload(); }})五、為了不必每次構建項目都要輸入webpack --display-modules --display-chunks --config build/webpack.config.js這條長命令，我們在package.js文件中修改“scripts”項：
"scripts": { "build":"webpack --display-modules --display-chunks --config build/webpack.config.js", "dev":"node ./build/dev-server.js"}注意：package.js中不能有注釋。
這樣，我們就可以通過執行 npm run build 來進行構建，同時還增加了一條開啟開發服務器的命令 npm run dev。
六、網上很多人講解webpack配置是按“先……然后……”的邏輯往下走，以及每走一步會說明走這一步的原因是什么，配完之后的結果是什么，出了問題該怎么解決，這種撰文方式確實幫了很多入門webpack的小白們（譬如我）很大的忙。所以這里我就省略了這些步驟，而是直接將最后一步的配置結果展現出來給大家看，并且附上了詳細的注釋（寫得嘔心瀝血啊~）供大家理解，以后不出意外應該會出webpack構建vue的進階篇，敬請期待~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
