AddAssetHtmlPlugin
这个插件调用的npm包名是 add-asset-html-webpack-plugin
,经常和html-webpack-tags-plugin
做对比。
作用其实二者相同,当我们想在跟页面打包后,插入我们特定script的引用,来达到全局变量的效果(暴露在Window下)。
new AddAssetHtmlPlugin([
{
filepath: path.resolve(__dirname, '../src/axios.min.js'),
outputPath: 'smc_public/dll/',
publicPath: path.join(publicPath, 'smc_public/dll'),
includeSourcemap: true}
])
区别是
html-webpack-tags-plugin
不会复制文件,而add-asset-html-webpack-plugin
会将文件先复制到dist
目录下(当然,可以配置到dist
的那个目录),再添加一个标签。
也就是说add-asset-html-webpack-plugin相当于 html-webpack-tags-plugin再加上一个copy-webpack-plugin:
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/bootstrap/dist/css', to: 'css/'},
{
from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
]),
new HtmlWebpackTagsPlugin({
links: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css']
})
]
webpack.ProvidePlugin
上述方式有一个问题。上述插件只是在script标签中插入脚本。本质上是挂载在window对象下。当我们想要暴露的全局变量不想在window对象下被找到(安全问题)时,应该如何去做?这里我们就用到了webpack.ProvidePlugin
。
// 内置模块提供全局变量
new webpack.ProvidePlugin({
csm:path.resolve(__dirname, '../src/app.bundle.js')
}),
这样暴露的变量可以在项目中不通过import
或者require
就可以直接使用。并且该对象没有暴露在window
下,达到隐藏数据对象的效果。