AddAssetHtmlPlugin
El nombre del paquete npm llamado por este complemento a add-asset-html-webpack-pluginmenudo se html-webpack-tags-plugincompara con.
El efecto es realmente el mismo, cuando queremos insertar una referencia a nuestro script específico después de empaquetarlo con la página, para lograr el efecto de las variables globales (expuestas en Ventana).
new AddAssetHtmlPlugin([
{
filepath: path.resolve(__dirname, '../src/axios.min.js'),
outputPath: 'smc_public/dll/',
publicPath: path.join(publicPath, 'smc_public/dll'),
includeSourcemap: true}
])
La diferencia es
html-webpack-tags-pluginque el archivo no se copiará, pero el add-asset-html-webpack-pluginarchivo se copiará al distdirectorio (por supuesto, distel directorio en el que se puede configurar ), y luego se agrega una etiqueta.
En otras palabras, add-asset-html-webpack-plugin es equivalente a html-webpack-tags-plugin más un 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
Existe un problema con el enfoque anterior. El complemento anterior simplemente inserta el script en la etiqueta del script. Básicamente, está montado debajo del objeto de la ventana. ¿Qué debemos hacer cuando las variables globales que queremos exponer no quieren encontrarse debajo del objeto de ventana (problema de seguridad)? Aquí lo usamos webpack.ProvidePlugin.
// 内置模块提供全局变量
new webpack.ProvidePlugin({
csm:path.resolve(__dirname, '../src/app.bundle.js')
}),
Las variables expuestas de esta manera se pueden pasar en el proyecto importo requirese pueden utilizar directamente. Y el objeto no está expuesto window, el efecto de ocultar el objeto de datos.