Node version: 14.15.1

Project

my-project
  |- config
    |- webpack.common.config.js
    |- webpack.dev.config.js
    |- webpack.prod.config.js
  |- node_modules
  |- public
    |- index.html
  |- src
    |- images
        |- 01.png
    |- app.js
    |- app.less
    |- index.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
Copy the code

webpack.common.config.js

const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.js'.'.jsx'.'.json'.'.less'.'.scss'].modules: [path.resolve(__dirname, '.. /src'), 'node_modules'].alias: {
      _components: path.join(__dirname, '.. /src/components'),
      _images: path.join(__dirname, '.. /src/images'),
      _pages: path.join(__dirname, '.. /src/pages'),
      _util: path.join(__dirname, '.. /src/util'),
      _mock: path.join(__dirname, '.. /src/mock'),}},entry: {
    index: './src/index.js',},output: {
    filename: 'js/bundle.js'.path: path.resolve(__dirname, '.. /dist'),},module: {
    rules: [{test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'.options: {
            presets: ['@babel/preset-env'.'@babel/preset-react'].plugins: [
              '@babel/plugin-transform-runtime'.'@babel/plugin-proposal-class-properties',],},},}, {test: /\.(png|jpe? g|gif)$/i,
        loader: 'url-loader'.options: {
          name: '[name].[ext]'.outputPath: 'images'.limit: 8192,},},],},};Copy the code

webpack.dev.config.js

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'development'.devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true.port: 9000,},devtool: 'eval-cheap-module-source-map'.module: {
    rules: [{test: /\.css$/,
        use: [
          'style-loader'.// Generate JS strings as style nodes
          'css-loader'.// Convert CSS to CommonJS modules
          'postcss-loader',]}, {test: /\.less$/,
        use: ['style-loader'.'css-loader'.'postcss-loader'.'less-loader'],}, {test: /\.s[ac]ss$/,
        use: ['style-loader'.'css-loader'.'postcss-loader'.'sass-loader'],},],},plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html'.inject: 'body'.hash: false,})]});Copy the code

webpack.prod.config.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(common, {
  mode: 'production'.output: {
    filename: 'js/[name]-bundle-[hash:6].js',},module: {
    rules: [{test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader'],}, {test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'.'postcss-loader'.'less-loader',]}, {test: /\.(sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'.'postcss-loader'.'sass-loader',],},],},plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html'.filename: 'index.html'.inject: 'body'.minify: {
        removeComments: true,}}),new MiniCssExtractPlugin({
      filename: 'style/[name].[hash:6].css',}).new CleanWebpackPlugin(),
  ],

  optimization: {
    minimize: true.minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true./ / the log},},}),],},});Copy the code

package.json

{
  "name": "my-project"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack serve --open --config ./config/webpack.dev.config.js"."build": "webpack --config ./config/webpack.prod.config.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.13.10"."@babel/plugin-proposal-class-properties": "^ 7.13.0"."@babel/plugin-transform-runtime": "^ 7.13.10"."@babel/preset-env": "^ 7.13.10"."@babel/preset-react": "^ 7.12.13"."autoprefixer": "^ 10.2.5"."babel-loader": "^ 8.2.2"."clean-webpack-plugin": "^ 3.0.0"."css-loader": "^ 5.1.3"."css-minimizer-webpack-plugin": "^ 1.3.0"."file-loader": "^ 6.2.0"."html-webpack-plugin": "^ 5.3.1"."less": "^ 4.4.1"."less-loader": "^ 8.0.0." "."mini-css-extract-plugin": "^ 1.3.9"."node-sass": "^ 5.0.0"."postcss": "^ 8.2.8"."postcss-loader": "^ 5.2.0." "."sass": "^ 1.32.8"."sass-loader": "^ 11.0.1"."style-loader": "^ 2.0.0." "."terser-webpack-plugin": "^ 5.1.1." "."url-loader": "^ 4.4.1"."webpack": "^ 5.25.1"."webpack-cli": "^ 4.5.0." "."webpack-dev-server": "^ 3.11.2"."webpack-merge": "^ 5.7.3." "
  },
  "dependencies": {
    "react": "^ 17.0.1"."react-dom": "^ 17.0.1"}}Copy the code