webpack經常使用loader和plugin

loader

loader是一種打包的方案，webpack默認只識別js結尾的文件，當遇到其餘格式的文件後，webpack並不知道如何去處理。此時，咱們能夠定義一種規則，告訴webpack當他遇到某種格式的文件後，去求助於相應的loader。

經常使用loader

1.加載scc style-loader、css-loader、less-loader和sass-loader（文件打包解析css less sass）

npm install --save-dev style-loader css-loader less-loader sass-loader

2.加載圖片和字體等文件 raw-loader、file-loader 、url-loader

npm install --save-dev file-loader raw-loader url-loader

3.加載數據xml和csv csv-loader xml-loader （打包加載解析csv和xml文件數據）

npm install --save-dev csv-loader xml-loader

4.校驗測試：mocha-loader、jshint-loader、eslint-loader

npm install --save-dev mocha-loader jshint-loader eslint-loader

5.編譯：babel-loader、coffee-loader、ts-loade

npm install --save-dev babel-loader coffee-loader ts-loade

經常使用plugin

webpack插件，採用不一樣的plugin完成各種不一樣的性需求，熱更新，css去重之類的問題

1.ProvidePlugin：自動加載模塊，代替require和import
2.html-webpack-plugin能夠根據模板自動生成html代碼，並自動引用css和js文件
3.extract-text-webpack-plugin 將js文件中引用的樣式單獨抽離成css文件
4.DefinePlugin 編譯時配置全局變量，這對開發模式和發佈模式的構建容許不一樣的行爲很是有用。
5.HotModuleReplacementPlugin 熱更新
6.optimize-css-assets-webpack-plugin 不一樣組件中重複的css能夠快速去重
7.webpack-bundle-analyzer 一個webpack的bundle文件分析工具，將bundle文件以可交互縮放的treemap的形式展現。
8.compression-webpack-plugin 生產環境可採用gzip壓縮JS和CSS
9.happypack：經過多進程模型，來加速代碼構建
10.clean-wenpack-plugin 清理每次打包下沒有使用的文件