webpack用法總結

　　原先已經翻譯過一篇關於webpack的文章了，那是剛開始學習webpack時參考阮一峯的教程，順便就把它的英文文章給翻譯了過來。Webpack是一個強大的模塊化打包和構建工具，不只能對JS進行打包，並且還能經過加載器對CSS 、image 、font 進行打包，引用時直接看成模塊來引用，最後統一打包成一個bundle.js文件來輸出；同時Webpack還支持插件功能，其各類插件大大豐富了webpack的功能，如最多見的html-webpack-plugin插件，能由寫好的模版在編譯後直接生成所須要的html頁面，方便維護、擴展和部署上線。此外，Webpack還能對css進行預處理, 如使用postcss－loader中的autoprefixer 、pxtorem等功能實現CSS免前綴 ，px自動轉換爲rem；使用less-loader 、scss-loader直接引用less、scss文件；使用css-loader中的css modules實現CSS樣式的局部與全局編寫，並用hash值來進行樣式命名，讓你在編寫代碼時不再用爲命名而發愁了。。。總之，Webpack給人以無所不能的感受，可是上手麻煩，配置項看起來讓新手一臉懵逼，遠不如gulp小而靈巧，應該也算是它的一個弊端吧！

　　因在Webpack裏踩過的坑實在太多了，因此便對本身現階段所瞭解的用法做一個總結，後續學習再逐漸完善上去。

1、配置文件

　　配置文件中主要分爲入口文件處理、輸出處理、加載器、插件、webpack開發服務器這幾個部分，因webpack開發服務器這部份內容較多，放到後面詳細介紹。

  1 var webpack = require('webpack');
  2 var path = require('path');
  3 
  4 // _dirname 爲當前模塊文件所在目錄的絕對路徑
  5 // path.resolve 至關於 _dirname + build 進行地址拼接
  6 var buildPath = path.resolve(__dirname,"build");
  7 var nodemodulesPath = path.resolve(__dirname,'node_modules');
  8 
  9 var autoprefixer = require('autoprefixer');
 10 var px2rem = require('postcss-pxtorem');
 11 var px2remOpts = {
 12     rootValue: 100,
 13     propWhiteList: [],
 14 };
 15 
 16 var HtmlWebpackPlugin = require('html-webpack-plugin');
 17 
 18 var config = {
 19 
 20     //入口文件配置
 21     entry:｛
 22         // 入口文件路徑
 23         index:path.resolve(__dirname,'src/main.js'),
 24 
 25         // 爲了優化，切割代碼，提取第三方庫
 26         vendor: [
 27           'react',
 28           'react-dom',
 29           'react-router'
 30         ]
 31         
 32     ｝,
 33 
 34     resolve:{
 35         // extentions: 配置文件的擴展名，當在import文件時，不用在須要添加擴展名
 36         // 默認的擴展名爲[「」, 「.webpack.js」, 「.web.js」, 「.js」]
 37         // 空字符串在此是爲了resolve一些在import文件時不帶文件擴展名的表達式
 38         extentions:["","jsx","json","js","web.js"],
 39 
 40         // 路徑別名, 懶癌福音
 41         alias:{
 42           app:path.resolve(__dirname,'src/js'),
 43           // 之前你可能這樣引用 import { Nav } from '../../components'
 44           // 如今你能夠這樣引用 import { Nav } from 'app/components'
 45 
 46           style:path.resolve(__dirname,'src/styles')
 47           // 之前你可能這樣引用 @import "../../../styles/mixins.scss"
 48           // 如今你能夠這樣引用 @import "style/mixins.scss"
 49         }          
 50     },
 51 
 52     //文件導出的配置
 53     output:{
 54         path:buildPath,               // 輸出路徑
 55         filename:"app.js"             // 輸出文件名 
 56     },
 57 
 58     // 生成source-map , 便於開發者debug 
 59     devtool: 'eval-source-map',
 60 
 61     module: {
 62         //loaders加載器
 63         loaders: [
 64             // babel ES6解析
 65             {
 66                 test: /\.(js|jsx)$/,                 // 用正則來驗證所要測試的文件後綴名
 67                 include: [path.resolve(__dirname, "src/app")],  // 所要處理文件的路徑
 68                 exclude: [nodemodulesPath],             // 排除不處理的目錄
 69                 // 加載器的名字，不一樣加載器之間用！鏈接，？爲使用該加載器後附帶的功能 , 加載器的執行爲從後往前執行
 70                 loader: 'babel' 
 71             },
 72                                      
 73             // image解析
 74             {
 75                 test:/\.(png|jpg)$/,
 76                 loader:'url-loader?limit=50000'
 77             },
 78             // CSS文件解析
 79             {
 80                 test:   /\.css$/,
 81                 loader: "style-loader!css-loader!postcss-loader"
 82             }
 83 
 84         ]
 85     },
 86 
 87     // postcss平臺
 88     // 此處配置了免前綴功能和px轉換爲rem功能
 89     postcss: [ autoprefixer({ browsers: ['last 2 versions'] }),px2rem(px2remOpts) ],
 90 
 91     plugins: [
 92 
 93         //   優化使用模塊
 94         new webpack.optimize.OccurrenceOrderPlugin(), 
 95         // webapck 會給編譯好的代碼片斷一個id用來區分
 96         // 而這個插件會讓webpack在id分配上優化並保持一致性。
 97         // 具體是的優化是：webpack就可以比對id的使用頻率和分佈來得出最短的id分配給使用頻率高的模塊
 98 
 99 
100         //   壓縮代碼
101         new webpack.optimize.UglifyJsPlugin({
102               compressor: {
103                 warnings: false
104               }
105         }), 
106 
107 
108         //  去除debug提示信息
109         // 不少庫的內部，有process.NODE_ENV的判斷語句，
110         // 改成production。最直觀的就是沒有全部的debug相關的東西，體積會減小不少
111         new webpack.DefinePlugin({
112               'process.env': {
113                 'NODE_ENV': JSON.stringify('production')
114               }
115         })
116 
117 
118         // 'vendor' 就是把依賴庫(好比react react-router, redux)所有打包到 vendor.js中
119         // 'vendor.js' 就是把本身寫的相關js打包到bundle.js中
120         // 通常依賴庫放到前面，因此vendor放第一個
121         new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js' ),
122 
123 
124         new HtmlWebpackPlugin({
125               template:'src/index.html',
126               // html模板的路徑
127               
128               title: '產品模式',
129               // html模版的標題
130               
131               filename:'index.html',
132               // 文件名以及文件將要存放的位置
133 
134               favicon:'./src/favicon.ico',
135               // favicon路徑
136               
137               inject:'body',
138               // js插入的位置，true/'head'  false/'body'
139 
140               chunks: ['vendor', 'index' ],
141               // 指定引入的chunk，根據entry的key配置，不配置就會引入全部頁面的資源
142 
143               hash:true,
144               // 這樣每次客戶端頁面就會根據這個hash來判斷頁面是否有必要刷新
145               // 在項目後續過程當中，常常須要作些改動更新什麼的，一但有改動，客戶端頁面就會自動更新！
146 
147               minify:{
148               // 壓縮HTML文件
149                 removeComments:true,
150                 // 移除HTML中的註釋
151 
152                 collapseWhitespace:true
153                 // 刪除空白符與換行符
154               }
155         })
156     ]
157 }
158 
159 module.exports = config;

　　上面代碼中詳細介紹了Webpack的用法和在實際項目開發過程當中的經常使用的加載器和插件

2、啓動運行

　　Webpack該如何啓動運行編譯了，主要有如下幾種方法：

　　1. 啓動編譯　

webpack    //  默認執行 webpack.config.js文件
webpack --config webpack-pro-config.js       //執行另外一份配置文件 
webpack --display-error-details //顯示異常信息 
webpack --watch //監聽變更並自動打包 
webpack -p //壓縮混淆腳本，這個很是很是重要！ 
webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪裏了

　　2.快捷執行

　　當咱們想執行webpack的執行命令時，咱們就得在命令行中輸入很長一遛的命令，本身操做起來很不方便，同時也不便於後續人員的維護, 咱們能夠把執行命令寫在package.json文件中的scripts鍵中，這樣咱們每次執行時只需敲自定義的命令便可

"scripts": {
    "start": "webpack --watch",      // npm start  
    "dev": "webpack-dev-server --host 0.0.0.0",    // npm run dev
    "pro": "webpack --config webpack-pro-config.js --progress --colors"   // npm run pro
  }

  

webpack各加載器和插件用法詳細介紹：

1.  上次我翻譯的webpack-demo