webpack 配置

webpack 配置

参考：

• 【万字】透过分析 webpack 面试题，构建 webpack5.x 知识体系

👉 占位符/hash

Webpack 文件指纹策略是将文件名后面加上 hash 值。特别在使用 CDN 的时候，缓存是它的特点与优势，但如果打包的文件名，没有 hash 后缀的话，你肯定会被缓存折磨的够呛 😂

例如我们在基础配置中用到的：filename: “[name][hash:8][ext]”

这里里面 [] 包起来的参数，就叫占位符，如下：

占位符	解释
ext	文件后缀名
name	文件名
path	文件相对路径
folder	文件所在文件夹
hash	每次构建生成的唯一 hash 值
chunkhash	根据 chunk 生成 hash 值
contenthash	根据文件内容生成 hash 值

• hash ：任何一个文件改动，整个项目的构建 hash 值都会改变；
• chunkhash：文件的改动只会影响其所在 chunk 的 hash 值；
• contenthash：每个文件都有单独的 hash 值，文件的改动只会影响自身的 hash 值；

👉 webpack.config.js  分离写法

分离为三种:公共的、开发 （dev）、生产 （build 默认的）、

新建一个 build 文件夹

• base.config.js  –公共配置
• dev.config.js  –开发配置
• prod.config.js  –生产配置

合并配置需要安装

npm install webpack-merge –save-dev

生产配置,和开发配置都需进行以下操作

–引入合并插件

const webpackMerge = require(‘webpack-merge’)

–引入公共配置

const baseConfig = require(‘./base.config’)

–导出

module.exports = webpackMerge(baseConfig，{

生产的配置/开发的配置

})

再在 package.json 中配置

👉  取消箭头函数兼容老浏览器

👉 babel 配置

npm i -D @babel/core @babel/preset-env babel-loader core-js

• webpack.conifg.js 中可以写

test: /\.js$/i，
use:[
  //指定加载器 babel这种复杂配置可以这样使用
  {
    loader:"babel-loader",
    //配置babel
    options:{
      //设置预定义的环境
      presets:[
        [
          //指定环境的插件
          '@babel/preset-env',
          //配置信息
          {
            //要兼容的目标浏览器
            targets:{
              "chrome":"58",
              "ie":"11"

            },
            //指定corejs的版本
            "corejs":"3",
            //使用 corejs的方式 "usage" 表示按需加载
            "useBuiltIns":"usage"

          }
        ]
      ]
    }
  },
  'ts-loader'

],

• 避免过于臃肿可以单独配置一个 .babelrc.js 文件。 但依旧需要配置上面的 loader

// ./babelrc.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        // useBuiltIns: false 默认值，无视浏览器兼容配置，引入所有 polyfill
        // useBuiltIns: entry 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill
        // useBuiltIns: usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加
        useBuiltIns: "entry",
        corejs: "3.9.1", // 是 core-js 版本号
        targets: {
          chrome: "58",
          ie: "11",
        },
      },
    ],
  ],
};

-还可使用 babel 提供的插件，用于解析，正在提案，还未加入 ECMA 规范中的特性。比如装饰器(decorators)等

npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
● npm install -D @babel/plugin-proposal-decorators
● npm install -D @babel/plugin-proposal-class-properties

.babelrc.js 文件中配置

...
plugins: [
  ["@babel/plugin-proposal-decorators", { legacy: true }],
  ["@babel/plugin-proposal-class-properties", //? { loose: true }],
  ]

👉  配置地址别名 超实用

–公共配置中设置：

–别名适用 import 导入

–src 属性中 前需要加入 ~

👉  环境区分

本地环境：

• 需要更快的构建速度
• 需要打印 debug 信息
• 需要 live reload 或 hot reload 功能
• 需要 sourcemap 方便定位问题
• …

生产环境：

• 需要更小的包体积，代码压缩+tree-shaking
• 需要进行代码分割
• 需要压缩图片体积
• …

针对不同的需求，首先要做的就是做好环境的区分

1. 本地安装 cross-env

npm install cross-env -D

2. 配置启动命令

打开 ./package.json

"scripts": {
  "dev": "cross-env NODE_ENV=dev webpack serve --mode development",
  "test": "cross-env NODE_ENV=test webpack --mode production",
  "build": "cross-env NODE_ENV=prod webpack --mode production"
},

3. 在 Webpack 配置文件中获取环境变量

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

console.log("process.env.NODE_ENV=", process.env.NODE_ENV); // 打印环境变量

const config = {
  entry: "./src/index.js", // 打包入口地址
  output: {
    filename: "bundle.js", // 输出文件名
    path: path.join(__dirname, "dist"), // 输出文件目录
  },
  module: {
    rules: [
      {
        test: /\.css$/, //匹配所有的 css 文件
        use: "css-loader", // use: 对应的 Loader 名称
      },
    ],
  },
  plugins: [
    // 配置插件
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

module.exports = (env, argv) => {
  console.log("argv.mode=", argv.mode); // 打印 mode(模式) 值
  // 这里可以通过不同的模式修改 config 配置
  return config;
};

👉 source-map

SourceMap 是一种映射关系，当项目运行后，如果出现错误，我们可以利用 SourceMap 反向定位到源码位置

- 在 webpack.config.js 中的 config 里的 devtool 中配置。

• 执行打包后，dist 目录下会生成以 .map 结尾的 SourceMap 文件

- 所有的 source-map**  的类型如下：**

devtool	build	rebuild	显示代码	SourceMap 文件	描述
(none) / false	很快	很快	无	无	无法定位错误
eval	快	很快（cache）	编译后	无	定位到文件
source-map	很慢	很慢	源代码	有	定位到行列
eval-source-map	很慢	一般（cache）	编译后	有（dataUrl）	定位到行列
eval-cheap-source-map	一般	快（cache）	编译后	有（dataUrl）	定位到行
eval-cheap-module-source-map	慢	快（cache）	源代码	有（dataUrl）	定位到行
inline-source-map	很慢	很慢	源代码	有（dataUrl）	定位到行列
hidden-source-map	很慢	很慢	源代码	有	无法定位错误
nosource-source-map	很慢	很慢	源代码	无	定位到文件

- 校验规则 ^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$ 下的关键字说明

关键字	描述
inline	代码内通过 dataUrl 形式引入 SourceMap
hidden	生成 SourceMap 文件，但不使用
eval	eval(…) 形式执行代码，通过 dataUrl 形式引入 SourceMap
nosources	不生成 SourceMap 中的 sourceContent ，即防止源文件内容包含在 SourceMap 中
cheap	只需要定位到行信息，不需要列信息
module	loader 是否生成 sourceMap。便于多次编译后能直接回到最初的源代码中的错误位置

- 推荐配置

开发推荐：eval-cheap-module-source-map

• 本地开发首次打包慢点没关系，因为  eval  缓存的原因，rebuild 会很快
• 开发中，我们每行代码不会写的太长，只需要定位到行就行，所以加上  cheap

我们希望能够找到源代码的错误，而不是打包后的，所以需要加上  modele

生产推荐：(none)

• devtool = false
• 不想别人看到我的源代码
• 没有 map 文件，包体积会更苗条