Webpack5 上手

0x0 前言

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

0x1 安装

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

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

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

我本机环境如下：

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 来安装自己想要的东西，但对我半生不熟的可以用脚手架的命令来初始化：

mkdir webpack5-demo
webpack-cli init

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

mkdir webpack5-demo
npx webpack-cli init

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

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 文件里面引入上面输出的的脚本：

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

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

"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 工具包作为服务：

yarn add webpack-dev-server -D

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

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

安装依赖：

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

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

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

0x5 SASS/SCSS

安装依赖：

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

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

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

yarn add postcss-loader postcss autoprefixer -D

在上面规则修改

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

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

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

0x7 ESLint

安装依赖：

yarn add eslint-webpack-plugin eslint -D

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

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

module.exports = {
  plugins: [
    esLintPlugin
  ]
}