推荐:《webpack学完这些就够了》
《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记,配置和原理应有尽有。现在由于webpack5.0的诞生,打算从现在开始从0开始写一遍webpack5.0的学习笔记,与大家一起分享学习。
以下是本节正文:
1.CleanWebpackPlugin
clean-webpack-plugin是一个插件,会在每次打包前,先清空制定目录下的文件,然后再打包
plugins:[
new CleanWebpackPlugin({
verbose: true,//是否在console中打印日志,true为是,默认为false
dry: false,//false为默认值,代表删除,true代表模拟删除,其实是不删除
cleanStaleWebpackAssets: true, // 在重新构建前删除所有未使用的webpack资产,默认true
protectWebpackAssets: true, // 保护当前的webpack资产,默认true
cleanOnceBeforeBuildPatterns: ['**/*'], // 在Webpack编译之前删除一次文件,不包括在重建中(监视模式),默认:['** / *'],如果是空数组,表示禁用
// cleanAfterEveryBuildPatterns // 在每个与此模式匹配的构建(包括监视模式)后删除文件,用于不是由Webpack直接创建的文件,默认:禁用
dangerouslyAllowCleanPatternsOutsideProject // 需要明确设置干选项,默认值:false
})
]
2.CopyWebpackPlugin
CopyWebpackPlugin用于拷贝资源
new CopyWebpackPlugin(
{
patterns:[
{
from: path.resolve(__dirname, './src/a.js'), // 将资源'./src/a.js'拷贝到'./'
to: './'
}
]
}
),
3.webpack5与webpack4启动脚本的区别
- webpack4起本地服务,用
webpack-dev-server
- webpack5起本地服务,用
webpack serve
其实,调用
webpack serve
的serve
就是调用了webpack-dev-server
讨论:cnpm是怎么实现的?
讨论:proxy是怎么实现的?反向代理?