## plugin的使用 **loader和plugin区别** - loader主要用于转换某些类型的模块，它是一个转换器。 - plugin是插件，它是对webpack本身的扩展，是一个扩展器。 **plugin的使用过程：** - 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装) - 步骤二：在webpack.config.js中的plugins中配置插件。 ## 常见的Plugin ## webpack 插件如何实现 webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在特定的阶段钩入想要添加的自定义功能。Webpack 的 Tapable 事件流机制保证了插件的有序性，使得整个系统扩展性良好。 [Plugin的API](https://link.juejin.cn?target=https%3A%2F%2Fwww.webpackjs.com%2Fapi%2Fplugins%2F "https://www.webpackjs.com/api/plugins/") 可以去官网查阅 webpack插件是一个具有apply方法的JS对象，apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问compiler对象。 原理：通过在生命周期的钩子中挂载函数，来实现功能扩展。 >environment 环境准备好 compile编译开始 compilation编译结束 emit打包资源到output之前S afterEmit打包资源到output之后 原理 * plugin 必须是一个函数，或者包含apply方法的对象；compiler.hooks可以访问钩子 * apply 方法有一个参数 compiler； * 通过 compiler 可以给 webpack 编译打包过程中添加钩子； * 通过钩子的回调函数 callback 拿到打包结果对象 compilation（通过compilation.assets 获取资源文件信息）； * 然后对打包结果对象 compilation 进行修改； ```js class MyPlugin { apply (compiler) { // 找到合适的事件钩子，实现自己的插件功能 compiler.hooks.emit.tap('MyPlugin', compilation => { console.log(compilation); // compilation: 当前打包构建流程的上下文 // do something... }) } } ``` ```js // 自定义plugin：功能：将js文件中的注释删除 class MyPlugin { apply (compiler){ // emit钩子的执行时机是：输出打包好的资源文件 asset 到 output 目录之前执行。 compiler.hooks.emit.tap('MyPlugin', compilation => { // compilation => 可以理解为此次打包的结果 // compilation.assets => 获取dist目录的所有生成的资源文件信息，例如：bundle.js for (const name in compilation.assets) { // 判断文件是否为js文件 -- 获取到资源的内容，例bundle.js if (name.endsWith('.js')) { const contents = compilation.assets[name].source() // const withoutComments = contents.replace(/\/\*\*+\*\//g, '') // 替换掉注释 compilation.assets[name] = { // 覆盖原有内容 --- 新的内容 以及新内容的大小 source: () => withoutComments, size:() => withoutComments.length } } } }) } } module.exports = MyPlugin ``` ## 有哪些常见的Plugin？他们是解决什么问题的？ >define-plugin：定义环境变量 commons-chunk-plugin：提取公共代码 uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码 **a，添加版权的Plugin：BannerPlugin** **b，打包html的plugin： html-webpack-plugin** index.html文件打包到dist文件夹中 - HtmlWebpackPlugin插件可： * 自动生成一个index.html文件(可以指定模板来生成) * 将打包的js文件，自动通过script标签插入到body中 ```javascript npm install html-webpack-plugin --save-dev ``` **c，js压缩的Plugin：uglifyjs-webpack-plugin -- 删除console与注释** uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致 ```javascript npm install uglifyjs-webpack-plugin@1.1.1 --save-dev ``` ```javascript const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); plugins: [ new webpack.BannerPlugin('最终版权归 Cookie_fzx所有'), new HtmlWebpackPlugin({ template: 'index.html' }), // new UglifyjsWebpackPlugin(), // 压缩，提交时使用 ], ``` vue cli 3.0中,  在vue.config.js中配置uglifyjs-webpack-plugin ``` configureWebpack:{ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { output:{ // 删除注释 comments:false }, compress: { // 删除console debugger 删除警告 warnings: false, drop_console: true,//console drop_debugger: false, pure_funcs: ['console.log']//移除console } } }) ] } } ```