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 软件包到当前项目