webpack4.29.x成神之路(二十一) 编写一个plugin

发布时间:2019-08-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack4.29.x成神之路(二十一) 编写一个plugin脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

上节: 编写一个loader

目录:

@H_304_11@

插件会运行在webpack的各个生命周期,我们设计一个插件时,必须确定这个插件的执行时机。
webpack的生命周期很多,参考:https://webpack.js.org/api/co...

现在写个简单的插件,需求是在打包完成后,额外输出一个叫copyRight.txt的文件
根目录下新建plugins/copy-right.plugin.js:

@H_512_20@
hat.name }, size() { // 文件大小 return 30 } } cb(); }); } }" tITle="" data-original-title="复制">
module.exports = class CopyRightPlugin {
  constructor(params) {
    this.name = (params && params.name) || 'MaDAO';
  }
  apply(compiler) {
    /*
      compiler.hooks:webpack生命周期
    */

    const that = this;

    // 资输出到 output 目录前执行, 是个异步钩子
    compiler.hooks.emit.tapAsync('CopyRightPlugin', (compilation, cb) => {
      // compilation.assets  打包后的内容
      // debugger;
      compilation.assets['copyRight.txt'] = {
        source() {
          // 返回文件内容
          return 'copyright by ' + that.name
        },
        size() {
          // 文件大小
          return 30
        }
      }
      cb();
    });
  }
}

es6的类就不多说了,然后再配置中引用。
webpack/webpack.PRod.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseconfig = require('./webpack.base');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyRightPlugin = require('../plugins/copy-right.plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /.less$/,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      }, 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CopyRightPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
});

然后npm run build, 查看输出目录:

clipboard.png

下节:手动配置vue-cli上

脚本宝典总结

以上是脚本宝典为你收集整理的webpack4.29.x成神之路(二十一) 编写一个plugin全部内容,希望文章能够帮你解决webpack4.29.x成神之路(二十一) 编写一个plugin所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。