【ReactCli】开发模式脚手架配置

dev

const path = require('path'); //nodejs
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/main.js",
    output: {
        path: undefined,
        filename: "static/js/[name].js",
        chunkFilename: 'static/js/[name].chunk.js',
        assetModuleFilename: "static/media/[hash:10][ext][query]"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                     "css-loader", 
                     {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: ["postcss-preset-env"]
                        }
                    }
                }]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader", 
                    "css-loader",
                     {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ["postcss-preset-env"]
                            }
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", 
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: ["postcss-preset-env"]
                        }
                    }
                }, 
                "sass-loader"]
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: ["postcss-preset-env"]
                        }
                    }
                }, 
                "stylus-loader"]

            },
            {
                test: /\.(jpe?g|png|gif|webp|svg)/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.(woff2?|ttf)/,
                type: "asset/resource",
            },
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, "../src"),
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    cacheCompression: false
                }
            }
        ]
    },
    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'),
            exclude: "node_modules",
            catch: true,
            cacheLocation: path.resolve(__dirname, '../node_modules/.catch/eslintcatche')
        }), new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html')
        })
    ],
    mode: 'development',
    devtool: "cheap-module-source-map",
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: {
            name: entrypoint => `runtime~${entrypoint.name}.js`
        }
    },
    devServer: {
        host: 'localhost', //启动服务器域名
        port: "3000", //启动服务器端口号
        open: true, //是自动打开浏览器
        hot: true //关闭HML
    },
    //自动补全
    resolve: {
        extensions: [".jsx", ".js", ".json"]
    }
}

prod

const path = require('path'); //nodejs
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require('terser-webpack-plugin')
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "static/js/[name].[contenthash:10].js",
        chunkFilename: 'static/js/[name].[contenthash:10].chunk.js',
        assetModuleFilename: "static/media/[hash:10][ext][query]",
        clean: true
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin, "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ["postcss-preset-env"]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin, "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ["postcss-preset-env"]
                            }
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin, "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ["postcss-preset-env"]
                            }
                        }
                    },
                    "sass-loader"
                ]
            },
            {
                test: /\.styl$/,
                use: [MiniCssExtractPlugin, "css-loader", {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ["postcss-preset-env"]
                            }
                        }
                    },
                    "stylus-loader"
                ]

            },
            {
                test: /\.(jpe?g|png|gif|webp|svg)/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.(woff2?|ttf)/,
                type: "asset/resource",
            },
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, "../src"),
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    cacheCompression: false
                }
            }
        ]
    },
    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'),
            exclude: "node_modules",
            catch: true,
            cacheLocation: path.resolve(__dirname, '../node_modules/.catch/eslintcatche')
        }), new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html')
        }), new MiniCssExtractPlugin({
            filename: "static/css/[name].[contenthash:10].css",
            chunkFilename: "static/css/[name].[contenthash:10].chunk.css"
        }), new ImageMinimizerPlugin({
            minimizerOptions: {
                // Lossless optimization with custom option
                // Feel free to experiment with options for better result for you
                plugins: [
                    ["gifsicle", {
                        interlaced: true
                    }],
                    ["jpegtran", {
                        progressive: true
                    }],
                    ["optipng", {
                        optimizationLevel: 5
                    }],
                    // Svgo configuration here https://github.com/svg/svgo#configuration
                    [
                        "svgo",
                        {
                            plugins: extendDefaultPlugins([{
                                    name: "removeViewBox",
                                    active: false,
                                },
                                {
                                    name: "addAttributesToSVGElement",
                                    params: {
                                        attributes: [{
                                            xmlns: "http://www.w3.org/2000/svg"
                                        }],
                                    },
                                },
                            ]),
                        },
                    ],
                ],
            },
        }),new CopyPlugin({
            patterns: [
              { from: path.relative(__dirname,"../public"), to:  path.relative(__dirname,"../dist"), exports
              globOptions: {
                dot: true,
                gitignore: true,
                ignore: ["**/index.html"],
              },
            },
            ],
          }),
    ],
    mode: 'production',
    devtool: "source-map",
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: {
            name: entrypoint => `runtime~${entrypoint.name}.js`
        },
        minimizer: [
            new CssMinimizerPlugin(), new TerserWebpackPlugin()
        ]
    },
    //自动补全
    resolve: {
        extensions: [".jsx", ".js", ".json"]
    }
}
//https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root
//npm install copy-webpack-plugin --save-dev

{
  "name": "react-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browsersList": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-decorators": "^7.20.2",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "babel-preset-react-app": "^10.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.2",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "eslint-config-react-app": "^7.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.0",
    "rimraf": "^3.0.2",
    "style-loader": "^3.3.1",
    "stylus-loader": "^7.1.0",
    "terser-webpack-plugin": "^5.3.6",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1",
    "webpack-manifest-plugin": "^5.0.0"
  },
  "dependencies": {
    "@loadable/component": "^5.15.2",
    "axios": "^1.2.0",
    "core-js": "^3.26.1",
    "core-js-compat": "^3.4.7",
    "decimal.js": "^10.4.2",
    "eslint-webpack-plugin": "^3.2.0",
    "js-cookie": "^3.0.1",
    "mobx": "^6.7.0",
    "mobx-react": "^7.6.0",
    "postcss-loader": "^7.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "sass-loader": "^13.2.0"
  }
}

合并

const path = require('path'); //nodejs
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require('terser-webpack-plugin')
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const isProduction = process.env.NODE_ENV === 'production';
const getStyleLoaders = (pre) =>{
    return [
        isProduction? MiniCssExtractPlugin.loader :"style-loader",
        "css-loader",
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: ["postcss-preset-env"]
                }
            }
        },
        pre
    ].filter(Boolean)
}
module.exports = {
    entry: "./src/main.js",
    output: {
        path: isProduction?path.resolve(__dirname, "../dist"):undefined,
        filename:isProduction? "static/js/[name].[contenthash:10].js":"static/js/[name].js",
        chunkFilename: isProduction? 'static/js/[name].[contenthash:10].chunk.js':'static/js/[name].chunk.js',
        assetModuleFilename: "static/media/[hash:10][ext][query]",
        clean: true
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: getStyleLoaders()
            },
            {
                test: /\.less$/,
                use:getStyleLoaders('less-loader')
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders('sass-loader')
            },
            {
                test: /\.styl$/,
                use:  use: getStyleLoaders('stylus-loader')
            },
            {
                test: /\.(jpe?g|png|gif|webp|svg)/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.(woff2?|ttf)/,
                type: "asset/resource",
            },
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, "../src"),
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    cacheCompression: false
                }
            }
        ]
    },
    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'),
            exclude: "node_modules",
            catch: true,
            cacheLocation: path.resolve(__dirname, '../node_modules/.catch/eslintcatche')
        }), new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html')
        }),  isProduction && new MiniCssExtractPlugin({
            filename: "static/css/[name].[contenthash:10].css",
            chunkFilename: "static/css/[name].[contenthash:10].chunk.css"
        }),  new ImageMinimizerPlugin({
            minimizerOptions: {
                // Lossless optimization with custom option
                // Feel free to experiment with options for better result for you
                plugins: [
                    ["gifsicle", {
                        interlaced: true
                    }],
                    ["jpegtran", {
                        progressive: true
                    }],
                    ["optipng", {
                        optimizationLevel: 5
                    }],
                    // Svgo configuration here https://github.com/svg/svgo#configuration
                    [
                        "svgo",
                        {
                            plugins: extendDefaultPlugins([{
                                    name: "removeViewBox",
                                    active: false,
                                },
                                {
                                    name: "addAttributesToSVGElement",
                                    params: {
                                        attributes: [{
                                            xmlns: "http://www.w3.org/2000/svg"
                                        }],
                                    },
                                },
                            ]),
                        },
                    ],
                ],
            },
        }), isProduction && new CopyPlugin({
            patterns: [
              { from: path.relative(__dirname,"../public"), to:  path.relative(__dirname,"../dist"), exports
              globOptions: {
                dot: true,
                gitignore: true,
                ignore: ["**/index.html"],
              },
            },
            ],
          }),
    ],
    mode: isProduction? 'production':'development',
    devtool: "source-map",
    optimization: {
        minimize:isProduction,
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: {
            name: entrypoint => `runtime~${entrypoint.name}.js`
        },
        minimizer: [
            new CssMinimizerPlugin(), new TerserWebpackPlugin()
        ]
    },
    //自动补全
    resolve: {
        extensions: [".jsx", ".js", ".json"]
    }
}
//https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root
//npm install copy-webpack-plugin --save-dev
/*

 "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },

  server
*/

Vue CLI

1、CLI是什么意思？

是Command-Line Interface，翻译为命令行界面，但是俗称脚手架
Vue CLI是一个官方发布vue.js项目脚手架
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

2、Vue CLI使用前提 --Node（需要安装node）
然而使用Node，必须涉及到npm，
什么是NPM？

NPM的全称是Node Package Manager
是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准
经常使用NPM来安装一些开发过程中依赖包。

3、Vue CLI的使用

安装Vue脚手架

  npm install -g @vue/cli

注意：上面安装的是Vue CLI3的版本

Vue CLI2初始化项目

vue init webpack my-project