博客页面---前端

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.分类：

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: