webpack5生产模式

生产模式

生产模式准备

开发模式和生产模式有不同的 配置文件

2修改webpack.prod.js文件修改webpack.dev.js文件

修改webpack.dev.js文件

1》修改输出路径为undefined

2》将绝对路径进行修改,进行回退

此时文件的执行命令为

修改webpack.prod.js文件

1》修改绝对路径的部分,进行回退

2》打开clean:true 使每一次打包文件都会将之前打包的文件进行清空

3》删除devserver部分

4》更改模式为 production

执行命令

在package.json中将指令简化

不需要添加npx 因为使用运行指令的方式,默认有使用npx的效果,在运行环境中运行

npm start 开发环境

npm run build

css处理

将css单独打包成文件通过link标签加载,性能能好

webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

下载

模块导入

loader更改

plugin加入

css兼容性处理

loader设置

复制代码
 {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins:[
                      "postcss-preset-env",  //能解决大多数兼容性问题
                    ],
                  },
                },
              }, //    css样式兼容性处理代码放在           cssloader后面其他预编译器前面

给loader写配置项时,需要在后面添加options对象

控制兼容性

将重复出现的loader封装成一个函数 对loader进行封装

css压缩

CssMinimizerWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

安装

引入

插件调用

html压缩

总结

相关推荐
百思可瑞教育1 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪1001 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1001 天前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登2 天前
【Webpack】模块联邦
前端·webpack·node.js
Yvonne爱编码4 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
会有钱的-_-4 天前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
xiaopengbc5 天前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
ningmengjing_6 天前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20006 天前
Webpack开发:从入门到精通
前端·webpack·node.js
passer9816 天前
基于webpack的场景解决
前端·webpack