Webpack5 上手

淮城一只猫 • 奇技淫巧
•
阅读量 0 次 • 评论量 0 个

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
  ]
}
喵~