Webpack配置总结

启动 webpack

./node_modules/.bin/webpack
npx webpack
package.json 中加上

1
2
3


"script": {
  "build": "webpack"
}

让 webpack 支持 IE

根目录加上配置文件.browserlistrc

[production]
> 1% //要支持大于1%的浏览器
ie 9 //要支持ie9

[modern]
last 1 chrome verson //支持最近的第一个chrome版本
last 1 firefox verson //支持最近的第一个firefox版本

[ssr]
node 12

使用 babel-loader

babel 中的 @babel/parse，@babel/traverse，@babel/generate 会将代码转为 AST 树来进一步分析

使用 babel 来打包 js，官网例子

通过设置 preset 就可以让 babel 支持 es6 ，react jsx，ts 的语法
先来安装这些 preset

yarn add -D @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime @babel/preset-react @babel/preset-typescript

其中@babel/core 包含了（@babel/parse，@babel/traverse，@babel/generate）
plugin-transform-runtime 可以实现低版本浏览器的 polyfill，比如帮助实现低版本浏览器的 Promise

接下来创建根目录文件 webpack.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// scripts/webpack.base.js
const path = require('path')

module.exports = {
  // 入口文件，这里之后会着重强调
  entry: {
    main: path.resolve(__dirname, '../src/index.jsx'),
  },
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        use: 'babel-loader',
      },
    ],
  },
}

再创建根目录文件 .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"，
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

ESLint

ESLsnt 会静态地自动分析代码的 bug（这里有两个方面一个是 webpack 编译的时候 ESLsnt 报错，一个是编辑器中 ESLsnt 静态检查报错，两者各自需要安装和配置）

首先让编译支持 ESLsint，执行：
yarn add eslint --dev
npx eslint --init //根据提示选项生成配置

可以参考我写的 ESLint 配置

之后搜索一下不同编辑器要怎么设置让 ESLint 在编辑器中生效
vscode 有 eslint 插件，webstorm 或者 IDEA 里有直接设置勾选

此外你可能听说过 tslint 但是由于 tslint 的作者已经停止维护了所以都用 eslint 比较好
eslint 的配置很复杂，使用 –init 的选项就好

tsconfig 配置

安装与初始化：

yarn add -D typescript
npx tsc --init

接下来修改 jsconfig 文件夹:

设置 jsx 代码转为 react，"jsx": "react"
ts 中的模块解析规则，将它修改为 node: "moduleResolution": "node",

webpack 支持项目中使用 alias 别名

在 webpack.config.js 中的第一层加入属性 resolve

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'), //.src是相对webpack.config.js的路径
  }
}

之后项目中就可以`import xxx from ‘@/xxx’，来代替./src/xxx

但是为了让 ts 也支持 alias 需要修改 tsconfig

1
2
3
4
5
6


// tsconfig.json
  ...
  "baseUrl": "./",
  "paths": {
    "@/*": ["./src/*"],
  },

支持 scss 打包

use loader sass-loader css-loader style-loaders

在 webpack.config.js 中增加配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


...
module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      ...
    ],
  },

设置 split 切分规则

optimization: {
    moduleIds: 'deterministic', //每个module有确定的id，不会因为其他文件缺失改变自己的id
    runtimeChunk: 'single', //"single" 会创建一个在所有生成 chunk 之间共享的运行时文件
    splitChunks: {
      cacheGroups: {
        vendor: { // 一般把类似react vue的库单独打包出来后称为vendor
          priority: 10, // 优先级最高
          minSize: 0, /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
          test: /[\\/]node_modules[\\/]/, // 为了匹配 /node_modules/ 或 \node_modules\
          name: 'vendors', // 文件名
          chunks: 'all',  // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
          // 这三行的整体意思就是把两种加载方式的来自 node_modules 目录的文件打包为 vendors.xxx.js
          // 其中 vendors 是第三方的意思
        },
        common: {
          priority: 5, // 优先级在node module库之后
          minSize: 0,
          minChunks: 2, // 把多个文件引用过的公共代码也单独打包出来的，这里的2指的就是至少被2个入口文件依赖
          chunks: 'all',
          name: 'common'
        }
      },
    },
  },

持续更新中。。。