webpack5 搭建项目 - Javascript 版

从零开始使用 webpack5.x 搭建 react 项目

步骤

安装 webpack 依赖
安装 react/react-dom
安装 babel 相关包
安装 sass 相关包
安装 mini-css-extract-plugin 分离css
安装 html-webpack-plugin 自定义 html 模板

安装包列表

# 安装 webpack 依赖
npm i -D webpack webpack-cli webpack-dev-server

# 安装 react/react-dom
npm i -S react react-dom

# 安装 babel 相关包
npm install @babel/core
npm install -D @babel/preset-env @babel/preset-react babel-loader

# 安装 sass 相关包
npm install sass-loader sass webpack --save-dev

# 安装 mini-css-extract-plugin 分离css
npm i -D mini-css-extract-plugin

# 安装 html-webpack-plugin 自定义 html 模板
npm i -D html-webpack-plugin

mini-css-extract-plugin 配置

这个与 style-loader 是并行的，有 style-loader 没有 min-css，所以配置的时候，要注意这一点。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ]
}

步骤

安装包列表

mini-css-extract-plugin 配置

参考