Webpack-based Simple React scaffolding

In some recent interviews, I found that some students were very weak in project construction. The work of these students has always been based on existing projects, with little involvement in project construction. So I did a simple project that I wanted to throw some light on

The github address of the project,Github.com/qqgiy/react…

Initialize the project

1. Through the firstnpm init -ygeneratepackage.json.

Second,webpackBasic configuration

1. The installationwebpackCore packages

yarn add webpack webpack-cli -D
Copy the code

2. Install development environment dependencies

yarn add webpack-dev-server -D
Copy the code

3. Install the mergerwebpackThe configuration file

yarn add webpack-merge -D
Copy the code

4. Based on the hash value in the file, generate oneHTMLThe template

yarn add html-webpack-plugin -D
Copy the code

5. Use to delete/clean up the build folder

yarn add clean-webpack-plugin -D
Copy the code

Three,babelconversion

1. The installationbabelCore dependency library

yarn add babel-loader @babel/core -D
Copy the code

Webpack configuration:

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

Babel.config. json:

{
  "presets": ["@babel/preset-env"]
}
Copy the code

2. Add supportES2015+Transformation of library

yarn add @babel/preset-env -D
Copy the code

Babel.config. json:

{
  "presets": ["@babel/preset-env"]
}
Copy the code

Four,CSSTo deal with

1. supportCSS

yarn add css-loader style-loader -D
Copy the code

2. usecssnanoOptimization and compressionCSS

yarn add css-minimizer-webpack-plugin -D
Copy the code

3. willCSSExtract into separate files for each containCSS 的 JSFile to create aCSSFile, and supportCSS 和 SourceMapsLoad on demand.

yarn add mini-css-extract-plugin -D
Copy the code

4. supportless

yarn add less less-loader -D
Copy the code

Fifth, supportJSXgrammar

yarn add @babel/preset-react -D
Copy the code

Babel.config. json:

{
  "presets": ["@babel/preset-react"]
}
Copy the code

6. Scaffolding project basic package

1. joinantd

yarn add antd
Copy the code

Introduce the necessary related styles of ANTD. Can be imported in index.less of the project root directory

@import '~antd/dist/antd.less';
Copy the code

The attached:

1. webpackThe related configuration

// 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'],
            },
        ],
    },
});
Copy the code

2. babelThe related configuration

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Copy the code