package.js

{
  "name": "fe_zaijiaxue_liuliangke_h5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./app/ci/start.js",
    "build": "node ./app/ci/build.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.0",
    "@babel/plugin-transform-runtime": "^7.10.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.10.0",
    "@babel/preset-react": "^7.10.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^4.3.0",
    "json-loader": "^0.5.7",
    "less-loader": "^6.1.0",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "colors": "^1.4.0",
    "deepmerge": "^4.2.2",
    "file-loader": "^6.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-mobile-datepicker": "^4.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack配置

var webpack = require('webpack');
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽取CSS文件插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode:"development",
    entry:[
        path.resolve(__dirname,'app/src/main.jsx')
    ],
    output:{
        path:__dirname+'/app/dist',
        filename:'[name].bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.(less|css)$/,
                use:ExtractTextPlugin.extract({
                    use:[{
                        loader:'css-loader'
                    },{
                        loader:'less-loader'
                    }],
                    fallback:'style-loader'
                })
            },
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-react','@babel/preset-env'],
                    plugins: ["@babel/plugin-proposal-class-properties"]
                  }
                }
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                    }
                  }
                ]
            },
            {
                test:/\.(png|jpg|jpeg)$/,
                use:'url-loader?limit=8192'
            },
            {
                test:/\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                use:'url-loader'
            },
            {
                test:/\.json$/,
                use:'json-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.web.js', '.js', '.jsx', '.json'],
    },
    externals: {
        "react": 'React',
        "react-dom": "ReactDOM",
        "zepto":"Zepto"
    },
    plugins: [
        new ExtractTextPlugin("[name].css"),
        new HtmlWebpackPlugin({
            template:'./app/src/template.html',//指定产出的HTML模板
            filename:'index.html',//产出的HTML文件名
            title:'index',
            hash:true,//会在引入的js里加入查询字符串避免缓存，
            minify:{
                removeAttributeQuotes:true,
                //删除注释
                removeComments:true,
                //删除空格
                collapseWhitespace:true
            }
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false
                },
                compress: {
                    drop_console:true
                },
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
            pageUrl :JSON.stringify('https://www.zaijiaxue.tech')
        })
    ]
}

重点是这里的配置，

{
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-react','@babel/preset-env'],
                    plugins: ["@babel/plugin-proposal-class-properties"]
                  }
                }
            },