基于Webpack的简易React脚手架

在最近的一些面试中，发现好些同学对于项目搭建能力方便很弱。这些同学的工作一直基于现有项目，很少去做项目构建方面的工作。因此我搭建了一个简易的项目，愿抛砖引玉～～

项目的github地址，点击此处访问

一、初始化项目

1. 先通过npm init -y生成package.json。

二、webpack基础配置

1. 安装webpack核心包

yarn add webpack webpack-cli -D
复制代码

2. 安装开发环境依赖包

yarn add webpack-dev-server -D
复制代码

3. 安装合并webpack配置文件

yarn add webpack-merge -D
复制代码

4. 根据文件中哈希值，生成一个HTML模板

yarn add html-webpack-plugin -D
复制代码

5. 用于删除/清理构建文件夹

yarn add clean-webpack-plugin -D
复制代码

三、babel转换

1. 安装babel核心依赖库

yarn add babel-loader @babel/core -D
复制代码

webpack中配置:

{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}
复制代码

babel.config.json中配置：

{
  "presets": ["@babel/preset-env"]
}
复制代码

2. 加入支持ES2015+ 转换的库

yarn add @babel/preset-env -D
复制代码

babel.config.json中配置：

{
  "presets": ["@babel/preset-env"]
}
复制代码

四、CSS处理

1. 支持CSS

yarn add css-loader style-loader -D
复制代码

2. 使用 cssnano 优化和压缩 CSS

yarn add css-minimizer-webpack-plugin -D
复制代码

3. 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

yarn add mini-css-extract-plugin -D
复制代码

五、支持JSX语法

yarn add @babel/preset-react -D
复制代码

babel.config.json中配置：

{
  "presets": ["@babel/preset-react"]
}
复制代码

附：

1. webpack相关配置

// webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Production',
            template: 'public/index.html',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
};

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        host: 'localhost',
        port: '8600',
        open: true,
    },
});

// webpack.prod.js
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [new MiniCssExtractPlugin(), new CleanWebpackPlugin({})],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
});
复制代码

2. babel相关配置

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
复制代码