Based on React+Webpack+Mobx+Less project setup guide

This tutorial is for Webpack version 4.x

Webpack

Webpack supports zero configuration. If entry is not configured, the default value is./ SRC. If output is not written, the default value is./dist.

Webpack deprecated the CommonsChunkPlugin in version 4.x and needs to replace it with optimy.splitchunks.

There are many problems with [email protected], based on the official recommendation, we use the mini-css-extract-plugin instead.

You cannot import webpack.config.js. You need to change the file name to webpack.config.babel.js. This is a feature that Webpack supports. If you change the file name to webpack.config.[loader].js, Webpack will use the corresponding Loader to convert the configuration file.

Webpack has added a mode configuration with two parameters, one for Production and one for development.

Address of the API

Babel

Babel is primarily used to translate code into ES5. Before using babel-Loader, you need to configure the babel-Loader in webpack.config.babel.js. Second, you need to add a.babelrc file, and configure some translation rules in this file.

Web site for online translation

Mobx

Mobx is a simple, extensible state management library.

Address of the API

Less

Less builds on the syntax of CSS by introducing variables, mixins, calculations, and functions, greatly simplifying writing CSS and reducing maintenance costs. As the name suggests, Less allows us to do more with Less code.

Address of the API

Detailed configuration

Create the webpack.config.babel.js file and configure it as follows.

import path from 'path';
// Clear the file plug-in in the folder
import CleanWebpackPlugin from 'clean-webpack-plugin';
// Generate the HTML file plug-in
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
// Open the browser plug-in
import OpenBrowserPlugin from 'open-browser-webpack-plugin';
import alias from './webpack.alias.js';

const port = 9676;

module.exports = {
    // Import file
    entry: './src/index.js'./ / output
    output: {
        // Output file name
        filename: 'bundle.js'.// Output path
        path: path.resolve(__dirname, 'dist')},// loader
    module: {
        rules: [{
            test: /\.js[x]? $/.loader: 'babel-loader'.// node_modules does not use babel-Loader
            exclude: /node_modules/
        }, {
            test: /\.less$/.use: [MiniCssExtractPlugin.loader, 'css-loader'.'less-loader'] {},test: /\.css/.use: [MiniCssExtractPlugin.loader, 'css-loader']]}},resolve: {
        alias: alias,
        extensions: ['.js'.'.jsx']},plugins: [
        new HtmlWebpackPlugin({
            title: 'Blog'.template: path.join(__dirname, 'template.ejs')}),new MiniCssExtractPlugin({
            filename: '[name].css'.allChunks: true
        }),
        new CleanWebpackPlugin('./dist/*.*'),
        new OpenBrowserPlugin({url: `http://localhost:${port}`})].devServer: {
        / / the port number
        port: port,
        host: '0.0.0.0'.compress: true.proxy: {
            '/api/*': {
                target: 'http://localhost:8987'}}}};Copy the code