js打印插件_webpack - 插件机制(笔记)

webppack原理与实战:

webpack通过loader机制，可以让我们加载各种各样的资源，但webpack还有一个也很重要的机制就是插件机制，可以让我们找到很多合适的插件，增加构建能力。

插件是如何使用的

在webpack的整个工作周期过程中，会提供需要很多钩子函数，我们只需要在钩子上挂载不同的任务，就能扩展webpack的能力了。

一些常用的插件

• CleanWebpackPlugin
• HtmlWebpackPlugin
• CopyWebpackPlugin

webpack.config.js配置插件使用

// import {Configuartion} from 'webpack'
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const RemoveCommentsPlugin = require('./remove-comments-plugin')
// /**
//  * @type {Configuartion}
//  */
module.exports = {
    mode:"none",
    entry:'./src/main.js',
    output: { 
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
     },
     plugins: [
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
            //  title:'Webpack plugin demo',
            //  meta:{
            //      viewport:'width=device-width'
            //  }
            title:'嵌套到模板中的标题',
            template:'./src/index.html'
         }),
         new CopyWebpackPlugin({
             patterns:[
                 {from:'static',to:''}
             ]
         }),
         new RemoveCommentsPlugin()
        ]
}

其中还是自定义了一个插件:RemoveCommentsPlugin

当我们自定义插件时，我们需要遵循webpack提供的形式。

这里定义个remove-comments-plugin.js，同时导出.

// remove-comments-plugin.js
// 可以帮助我们去除生成js脚本中的注释
class RemoveCommentsPlugin {
    apply(compiler) {
        compiler.hooks.emit.tap('RemoveCommentsPlugin', compilation => {
            for (const name in compilation.assets) {
                console.log(name)
                if (name.endsWith('.js')) {
                    const contents = compilation.assets[name].source()
                    const noComments = contents.replace(//*{2,}/s?/g, '')
                    compilation.assets[name] = {
                        source: () => noComments,
                        size: () => noComments.length
                    }
                }
            }
        })
        console.log('删除生成js中的注释')
    }
}

module.exports = RemoveCommentsPlugin;

使用 npx webpack构建看看效果

可以看到打印出了，删除生成js中的注释，还有所有的文件，在去看看打包的bundle.js会发现注释已经不见啦。