[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技术部） */ ~~~