如何选择丹徒网站建设,m版网站开发,融资网站开发,南昌企业建站webpack5常用插件使用 1. CleanWebpackPlugin2. HtmlWebpackPlugin3. DefinePlugin4.CopyWebpackPlugin 1. CleanWebpackPlugin
问题#xff1a;每次打包完都需要手动删除掉dist文件目录#xff0c;使用CleanWebpackPlugin就可自动清除dist目录。作用#xff1a;自动清除di… webpack5常用插件使用 1. CleanWebpackPlugin2. HtmlWebpackPlugin3. DefinePlugin4.CopyWebpackPlugin 1. CleanWebpackPlugin
问题每次打包完都需要手动删除掉dist文件目录使用CleanWebpackPlugin就可自动清除dist目录。作用自动清除dist文件目录1. 安装 npm install clean-webpack-plugin -D2. 解构 插件大都是封装成一个class的也可以是函数然后到时候去调用的hook回调因为它导出的是一个对象所以要通过解构取出来一个类。const { CleanWebpackPlugin } require(clean-webpack-plugin)4. 配置 plugins:[new CleanWebpackPlugin(),]2. HtmlWebpackPlugin
问题帮助我们打包的时候生成一个html入口文件还可通过options设置html模板和标题。1. 安装 npm install html-webpack-plugin -D
2. 引用 const HtmlWebpackPlugin require(html-webpack-plugin);
3. 配置模板和标题plugins:[new HtmlWebpackPlugin({template: ./public/index.html,title:哈哈哈哈哈,}),]3. DefinePlugin
问题帮助我们设置全局基础路径。允许创建一个在编译时可配置的全局常1. 解构webpack5自带有导出的是一个对象解构好直接引用。
const { DefinePlugin } require(webpack)
2. 配置模板的基础路径plugins:[new DefinePlugin({ // 设置基础路径BASE_URL: ./}),] 4.CopyWebpackPlugin
问题打包的时候有些文件不需要打包生成直接复制到打包好的文件目录中。复制某个文件或整个文件夹到生成目录中
1. 安装 npm install copy-webpack-plugin -D
2. 引用 const CopyWebpackPlugin require(copy-webpack-plugin);
3. 配置模板的基础路径plugins:[new CopyWebpackPlugin({ //复制文件patterns:[{from:public,to:./,globOptions:{ignore:[**/index.html]}}]})]
