> ## Content Index
> Fetch the complete content index at: https://iiong.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Webpack5 上手
- URL: https://iiong.com/get-started-with-webpack5/
- Published: 2020-12-09T12:08:40.000Z
- Updated: 2026-06-22T15:31:31.000Z
- Description: 之前很多项目都用到 Webpack 这个工具，毕竟目前前端领域上它所占的地位相当高，使用它可以减少大量的前端工作提高工作效率。正好最近需要用到它所以尝试下新版本的脚手架工具。
- Author: 淮城一只猫
- Tags: 奇技淫巧, Web 前端

### 0x0 前言

之前很多项目都用到 `Webpack` 这个工具，毕竟目前前端领域上它所占的地位相当高，使用它可以减少大量的前端工作提高工作效率。不过最近俩年使用 `Webpack4` 的版本，虽然没有遇到太大的问题，不过官方在今年十月份正式推出 `Webpack5` 的大版本，翻阅下更新日志改动 `API` 地方还蛮多的，正好最近需要用到它所以尝试下新版本的脚手架工具。所以本文写得非常简单，做个索引备用。

### 0x1 安装

说到底是它就是工具，不是那种 `jQuery` 、`Vue` 等这些天天用得到的东西，很多 `API` 需要查阅才得知，然而查阅过程却很蛋疼，因为资料太多了，一时无法下手，所以耐着心搞好第一个脚手架。

我的环境是 `macOS Big Sur 11.0.1` ，在此环境进行新建个符合现代化前端开发构建工具：

- 支持 `Babel` 语法转换
- 支持 `SCSS` 预处理器
- 支持 `POSTCSS` 浏览器厂商前缀兼容
- 支持 `ESLint` 语法检测
- 热更新加载

我本机环境如下：

```bash
Last login: Thu Dec  3 11:09:13 on ttys001
jaxson@iMac:~ » node -v
v12.19.1
jaxson@iMac:~ » npm -v
6.14.8

```

新版本工具对 `Node` 要求高，建议安装最新的版本即可。

> 运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)

### 0x2 初始化

熟悉 `Webpack` 的同学完全可以 `yarn init` 来安装自己想要的东西，但对我半生不熟的可以用脚手架的命令来初始化：

```bash
mkdir webpack5-demo
webpack-cli init

```

如果没有全局安装 `webpack-cli` 可以执行下面命令：

```bash
mkdir webpack5-demo
npx webpack-cli init

```

然后根据终端返回的信息进行配置，配置完毕后在项目目录下新建个 `config/webpack.dev.js` 文件：

```javascript
const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  mode: 'development',
  entry: {
    index: [
      './src/js/index.js',
    ]
  },
  output: {
    filename: 'index.js'
  },
  devtool: 'source-map',
  resolve: {
    alias: {
      '@': resolve('../src')
    }
  }
}

```

这样就形成最基础的开发环境配置文件，然后在项目的根目录下新建 `index.html` 文件里面引入上面输出的的脚本：

```html
<script src="index.js"></script>

```

保存后在 `package.json` 里面添加字段：

```javascript
"scripts": {
  "dev": "webpack serve --config config/webpack.dev.js"
}

```

然后在 `src/js/index.js` 填入：`console.log('hello world')`，完成之后在终端运行 `yarn dev`，在浏览器即可看到脚本输出的内容，就这样最简单的构建工具完成了。但功能支持上远远不够，还需要做额外的支持。

### 0x3 DevServer

针对 `development` 模式开启一个 `http` 服务，为了上面所提到的支持功能选择 `webpack-dev-server` 工具包作为服务：

```bash
yarn add webpack-dev-server -D

```

然后继续修改 `config/webpack.dev.js` 文件，在原来基础上添加一个字段：

```javascript
devServer: {
  contentBase: resolve('../src/html'),
  host: '0.0.0.0',
  port: 65506,
  hot: true,
  open: false,
  clientLogLevel: 'silent'
},

```

- `contentBase` ：将 `index.html` 从根目录移动到 `src/html` 目录下是因为更好的管理
- `host` ： 主机地址
- `port` ：端口号
- `hot` ：热加载
- `open` ：服务加载打开网页
- `clientLogLevel` ：关闭无用日志

然后启动服务就会看到自己想看到效果

### 0x4 Babel

安装依赖：

```bash
yarn add babel-loader @babel/core @babel/preset-env webpack -D

```

`config/webpack.dev.js` 添加规则：

```javascript
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

```

### 0x5 SASS/SCSS

安装依赖：

```bash
yarn add sass-loader sass css-loader style-loader -D

```

`config/webpack.dev.js` 添加规则：

```javascript
entry: {
  index: [
    './src/js/index.js',
    './src/scss/index.scss'
  ]
},
module: {
  rules: [
    {
      test: /\.scss$/i,
      use: [
        // 将 JS 字符串生成为 style 节点
        'style-loader',
        // 将 CSS 转化成 CommonJS 模块
        'css-loader',
        // 将 Sass 编译成 CSS
        {
          loader: "sass-loader",
          options: {
            sourceMap: true,
          }
        }
      ],
    }
  ]
}

```

### 0x6 PostCSS

```bash
yarn add postcss-loader postcss autoprefixer -D

```

在上面规则修改

```javascript
module: {
  rules: [
    {
      test: /\.scss$/i,
      use: [
        'style-loader',
        'css-loader',
        // => 添加
        'postcss-loader',
        {
          loader: "sass-loader",
          options: {
            sourceMap: true,
          }
        }
      ],
    }
  ]
}

```

项目目录下新建 `postcss.config.js` 来添加兼容规则：

```javascript
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

```

### 0x7 ESLint

安装依赖：

```bash
yarn add eslint-webpack-plugin eslint -D

```

`config/webpack.dev.js` 添加插件：

```javascript
const ESLintPlugin = require('eslint-webpack-plugin')
const esLintPlugin = new ESLintPlugin({
  emitWarning: true,
  emitError: true,
  failOnWarning: false,
  failOnError: false
})

module.exports = {
  plugins: [
    esLintPlugin
  ]
}

```