[TOC] ## 前言 通過本文你將熟悉并掌握webpack中常用的插件的使用以及其配置。 ## 概念解讀 插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。 ## 插件與loader區別 > Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這么來說，loaders是在打包構建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件并不直接操作單個文件，它直接對整個構建過程起作用。 ## 使用插件的方法 要使用某個插件，我們需要通過npm安裝它，然后要做的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組）繼續上面的例子，我們添加了一個給打包后代碼添加版權聲明的插件。 ~~~ //安裝插件 npm install html-webpack-plugin -D //引入 const HtmlWebpackPlugin = require('html-webpack-plugin') //插件中配置 module.exports = { // ... plugins: [ new HtmlWebpackPlugin(), ], } ~~~ ## 常用插件枚舉 ### HtmlWebpackPlugin 主要用于依據一個簡單的index.html模板，生成一個自動引用你打包后的JS文件的新index.html。這在每次生成的js文件名稱不同時非常有用（比如添加了hash值）。有了這個插件，我們便可以實現打包完成之后將資源路徑注入到頁面之中。（默認是吧output的文件注入到頁面底部） ~~~ plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', // 配置輸出文件名和路徑 template: 'assets/index.html', // 配置文件模板 }), ], ~~~ vue-cli 中的相關插件使用： ~~~ //dev配置 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), //prod配置 new HtmlWebpackPlugin({ filename: config.prod.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', }), ~~~ 常用的配置api如下：其他的如果需要可以去查看文檔 | 字段 | 類型 | 默認 |備注 | | --- | --- | --- | --- | | filename | string | index.html |腳本或者樣式注入文件的位置，也可以自己寫 | | template | string | - | 模板頁面的位置 | | inject | boolean /string | true | true或者body的時候，傳到底部，如果是head，加載到頂部 | | minify | boolean/string | true| 可以控制一些壓縮頁面的參數，比如去除注釋，換行，屬性引號 | | chunksSortMode | {String\|Function} | auto| 'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}可以決定chunk壓縮的模式 | | chunks | {?} | ？ | 允許只加入一些chunk | | cache | boolean |true | 只在文件發生改變的時候觸發，否則使用緩存| | title | string | '' |生成頁面使用的標題 | - [html-webpack-plugin模塊介紹](https://npm.taobao.org/package/html-webpack-plugin) ### webpack.DefinePlugin 定義插件，webpack自帶的插件，允許你創建一個在編譯時可以配置的全局常量。這可能會對開發模式和發布模式的構建允許不同的行為非常有用。比如,你可能會用一個全局的常量來決定 log 在開發模式觸發而不是發布模式。這僅僅是 DefinePlugin 提供的便利的一個場景。 另外我們也可以添加另外的一些api請求地址，轉發地址等，這樣就不用額外引入配置文件的部分了。只要你有這樣的場景，就去使用吧。 **注意事項** ：因為這個插件直接做的文本替換,給定的值必須包含字符串本身內的實際引號。通常，有兩種方式來達到這個效果，使用 '"production"', 或者使用 JSON.stringify('production')。 ~~~ //基本語法 new webpack.DefinePlugin(definitions) //示例，建議定義的字段大寫 new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify("5fa3b9"), BROWSER_SUPPORTS_HTML5: true, TWO: "1+1", "typeof window": JSON.stringify("object") }) ~~~ - 案例一 ：定義開發和生產環境的標志 ~~~ new webpack.DefinePlugin({ 'NICE_FEATURE': JSON.stringify(true), 'EXPERIMENTAL_FEATURE': JSON.stringify(false) }) ~~~ - 案例 二 ：定義你需要的web路徑，api地址 ~~~ new webpack.DefinePlugin({ 'process.env': env, 'PROXY_WEB_PATH': config.build.PROXY_WEB_PATH, 'STATIC_WEB_PATH': config.build.STATIC_WEB_PATH, 'WAP_PATH': config.build.WAP_PATH, }), ~~~ [定義插件介紹](http://www.css88.com/doc/webpack2/plugins/define-plugin/) ### webpack.optimize.UglifyJsPlugin webpack內置集成的壓縮js的插件，模塊地址：https://npm.taobao.org/package/uglifyjs-webpack-plugin 基本使用： ~~~ //安裝 npm i -D uglifyjs-webpack-plugin //使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { plugins: [ new UglifyJsPlugin() ] } ~~~ vue-cli中的配置使用 ： ~~~ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, unused: false, properties: false }, sourceMap: false， comments:false }), ~~~ 基本常用api介紹： | 參數 |類型 | 默認 | 備注 | | --- | --- | --- | --- | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ### 版權插件的實例 備注：這個插件是webpack內置的，直接使用就好。追加這個之后就會在打包之后的文件頭部追加需要的文字說明。 ~~~ var webpack=require("webpack"); module.exports={ plugins:[ new webpack.BannerPlugin("版權有責，翻版必究（xx技術部）") ] } // 最終生成的文字說明 /*! 版權所有，翻版必究（xx技術部） */ ~~~