脚本宝典收集整理的这篇文章主要介绍了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@
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, 查看输出目录:
下节:手动配置vue-cli上
以上是脚本宝典为你收集整理的webpack4.29.x成神之路(二十一) 编写一个plugin全部内容,希望文章能够帮你解决webpack4.29.x成神之路(二十一) 编写一个plugin所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。