webpack搭建开发环境

一.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: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', "css-loader"],
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      }
    ],
  },

四.Webpack 前端注入环境变量

1.需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效
2.问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV
3.解决：使用 Webpack 内置的 DefinePlugin 插件
4.作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式
5 配置 webpack.config.js 中给前端注入环境变量

// ...
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

五.Webpack 开发环境调错 source map

1.source map：可以准确追踪 error 和 warning 在原始代码的位置
2.问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
3.设置：webpack.config.js 配置 devtool 选项

 // ...
module.exports = {
// ...
   devtool: 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

4.注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

六. Webpack 设置解析别名路径

设置 Webpack 如何设置路径别名，方便我们引入目标模块

1.解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单
2.例如：
原来路径如下：

import { checkPhone, checkCode } from '../src/utils/check.js'

2.配置解析别名：在 webpack.config.js 中设置

// ...

const config = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

这样我们以后，引入目标模块写的路径就更简单了

import { checkPhone, checkCode } from '@/utils/check.js'

七.优化-CDN的使用

1.需求：开发模式使用本地第三方库，生产模式下使用 CDN 加载引入
2.CDN定义：内容分发网络，指的是一组分布在各个地区的服务器
3.作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取
4.好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略
实现需求的思路图：

步骤：

1.在 html 中引入第三方库的 CDN 地址 并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios'
  }
}

// ...
const config = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
      // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
      useCdn: process.env.NODE_ENV === 'production'
    })
  ]
}

八.多页面打包

1.概念：单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到

多页面：多个 html 文件，切换页面实现不同业务逻辑展示

2.需求：把多页面一起引入打包使用

3.步骤：

准备源码（html，css，js）放入相应位置，并改用模块化语法导出

配置 webpack.config.js 多入口和多页面的设置

// ...
const config = {
  entry: {
    '模块名1': path.resolve(__dirname, 'src/入口1.js'),
    '模块名2': path.resolve(__dirname, 'src/入口2.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js'  
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
  ]
}

九.优化-分割公共代码

需求：把 2 个以上页面引用的公共代码提取
步骤：
配置 webpack.config.js 的 splitChunks 分割功能

// ...
const config = {
  // ...
  optimization: {
    // ...
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }
      }
    }