一. Webpack的插件是什么
webpack的插件,可以增强webpack的自动化能力,使用插件,可以完成自动清空目录、拷贝资源文件、压缩输出代码等功能。
webpack的一个个插件,就是在 webpack生命周期的钩子上挂载的一个个任务。
一个插件(Plugin)必须是一个函数 或者 一个 包含 apply 方法的对象。
二. 常用的Webpack插件
常用的Webpack插件 | 作用 |
---|---|
clean-webpack-plugin | 在每次打包开始 清除打包目录中的文件 |
html-webpack-plugin | 自动生成使用 bundle.js 的HTML文件,可根据模板生成,可输出一个或多个html文件 |
copy-webpack-plugin | 拷贝不需打包的资源文件 如 public 文件夹中的资源 |
webpack.DefinePlugin | 为项目注入全局变量 |
更多webpack 插件 参见webpack 文档: Plugins | webpack 中文网
上面常用 webpack 插件 的使用方法,见 webpack.config.js :
module.exports = {
// ... 此处省略webpack.config.js文件其它部分
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack 自定义一个 Plugin',
meta: {
viewport: 'width=device-width'
},
template: './src/index.html' // html文件模板
}),
new HtmlWebpackPlugin({
filename: 'about.html', // 生成html文件的名称
}),
new CopyPlugin({
patterns: [
{ from: 'public', to: 'public' }, // 把项目根目录下的public文件夹拷贝到打包输出目录
]
}),
new webpack.DefinePlugin({
// 打包后 项目中任何使用的 API_BASE_URL 都会被替换为 'https://api.example.com'
API_BASE_URL: JSON.stringify('https://api.example.com')
}),
]
}
本文 完。