美文网首页
Webpack4-Plugins

Webpack4-Plugins

作者: 16325 | 来源:发表于2020-03-08 00:51 被阅读0次

    插件(Plugins)

    插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!

    插件目的在于解决 loader 无法实现的其他事

    剖析

    webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

    ConsoleLogOnBuildWebpackPlugin.js

    const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
    
    class ConsoleLogOnBuildWebpackPlugin {
        apply(compiler) {
            compiler.hooks.run.tap(pluginName, compilation => {
                console.log("webpack 构建过程开始!");
            });
        }
    }
    
    

    compiler hook 的 tap 方法的第一个参数,应该是驼峰式命名的插件名称。建议为此使用一个常量,以便它可以在所有 hook 中复用。

    用法

    由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。

    根据你的 webpack 用法,这里有多种方式使用插件。

    const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
    const webpack = require('webpack'); //访问内置的插件
    const path = require('path');
    
    const config = {
      entry: './path/to/my/entry/file.js',
      output: {
        filename: 'my-first-webpack.bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            use: 'babel-loader'
          }
        ]
      },
      plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
      ]
    };
    
    module.exports = config;
    

    相关文章

      网友评论

          本文标题:Webpack4-Plugins

          本文链接:https://www.haomeiwen.com/subject/rydldhtx.html