webpack搭建开发环境
- 一.webpack开发模式
- 二.webpack打包模式
- 三.webpack打包模式应用
- 四.Webpack 前端注入环境变量
- 五.Webpack 开发环境调错 source map
- 六. Webpack 设置解析别名路径
- 七.优化-CDN的使用
- 八.多页面打包
- 九.优化-分割公共代码
一.webpack开发模式
作用:启动 Web 服务,打包输出源码在内存,并会自动检测代码变化热更新到网页,不用自己一直重新打包
步骤;
1.下载 webpack-dev-server 软件包到当前项目
npm i webpack-dev-server --save-dev
2.配置自定义命令,并设置打包的模式为开发模式
在webpack.config.js中设置
// ...
module.exports = {
// ...
mode: 'development'
}
在package.json中设置
"scripts": {
// ...
"dev": "webpack serve --mode=development"
},
3.使用 npm run dev 来启动开发服务器,访问提示的域名+端口号,在浏览器访问打包后的项目网页,修改代码后试试热更新效果
在 js / css 文件中修改代码保存后,会实时反馈到浏览器
二.webpack打包模式
1.打包模式:告知 Webpack 使用相应模式的内置优化
2.分类:
模式名称 | 模式名字 | 特点 | 场景 |
---|---|---|---|
开发模式 | development | 调试代码,实时加载,模块热替换等 | 本地开发 |
生产模式 | production | 压缩代码,资源优化,更轻量等 | 打包上线 |
3.如何设置影响 Webpack呢?
方式1:在 webpack.config.js 配置文件设置 mode 选项
// ...
module.exports = {
// ...
mode: 'production'
}
方式2:在 package.json 命令行设置 mode 参数
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack serve --mode=development"
},
注意:命令行设置的优先级高于配置文件中的,推荐用命令行设置
三.webpack打包模式应用
1.需求:比如在开发模式下用 style-loader 内嵌更快,在生产模式下提取 css 代码
2. 方案1:webpack.config.js 配置导出函数,但是局限性大(只接受 2 种模式)
方案2:借助 cross-env (跨平台通用)包命令,设置参数区分环境
方案3:配置不同的 webpack.config.js (适用多种模式差异性较大情况)
3.主要使用方案 2 尝试,其他方案可以结合点击跳转的官方文档查看尝试
4.步骤:
下载 cross-env 软件包到当前项目
npm i cross-env --save-dev
2.配置自定义命令,传入参数名和值(会绑定到 process.env 对象下)
3.在 webpack.config.js 区分不同环境使用不同配置
module: