ABC-hlwyy-PcSystem/build/webpack.base.conf.js

//webpack.base.conf.js
//'use strict'
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 3 });

module.exports = {
    // 入口起点
    entry: {
        app: [
            path.join(__dirname, '../src/index.js')
        ],
        vendor: ['react', 'react-dom', 'react-router-dom', 'antd']
    },
    // 输出
    output: {
        //publicPath:'./',
        path: path.resolve(__dirname, '../dist'),
        chunkFilename: '[name].[chunkHash:8].min.js',
        filename: "[name].[hash:8].js",
    },
    // 解析
    resolve: {
        alias: { //配置绝对路径
            'tools': path.resolve(__dirname, '../src/tools'),
            'store': path.resolve(__dirname, '../src/store'),
            'pages': path.resolve(__dirname, '../src/pages'),
            'assets': path.resolve(__dirname, '../src/assets'),
            'routers': path.resolve(__dirname, '../src/routers'),
            'components': path.resolve(__dirname, '../src/components'),
            'containers': path.resolve(__dirname, '../src/containers'),
            'react-draggable$': path.resolve(__dirname, '../node_modules/react-draggable/build/cjs/cjs.js'),
        },
        extensions: ['.js', '.jsx']
    },
    // loader
    module: {
        rules: [
        // 独立规则：用 babel-loader 直接转译含新语法的 npm 包（绕过 happypack 缓存）
        {
            test: /\.js$/,
            include: [
                path.resolve(__dirname, '../node_modules/react-draggable'),
                path.resolve(__dirname, '../node_modules/react-resizable')
            ],
            use: {
                loader: 'babel-loader',
                options: {
                    cacheDirectory: false,
                    presets: [
                        ['@babel/preset-env', { targets: { ie: '11' } }],
                        '@babel/preset-react',
                        '@babel/preset-typescript',
                        '@babel/preset-flow'
                    ],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", {"legacy": true}],
                        ["@babel/plugin-proposal-class-properties", {"loose": true}],
                        "@babel/plugin-proposal-optional-chaining",
                        "@babel/plugin-proposal-nullish-coalescing-operator"
                    ]
                }
            }
        },
        {
            test: /\.js|jsx$/,
            exclude: /node_modules/,
            //loader: 'babel-loader'
            use: ['happypack/loader?id=babel']
        },
        {
            test: /\.css$/,
            //use: ['style-loader', 'css-loader']
            use: ['happypack/loader?id=css']
        },
        {
            test: /\.less$/,
            //use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            use: ['happypack/loader?id=less']
        },
        {
            test: /\.(jpg|jpeg|png|gif|eot|svg|ttf|woff)/,
            exclude: /node_modules/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: 'images/[hash:8].[name].[ext]'
                }
            }],
        }
        ]
    },
    // 插件
    plugins: [
        new HappyPack({
            id: 'less',
            loaders: [
                'style-loader',
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: { sourceMap: true }
                },
                'less-loader'
            ],
            verbose: true,
            threadPool: happyThreadPool
        }),
        new HappyPack({
            id: 'css',
            loaders: [
                'style-loader',
                'css-loader'
            ],
            verbose: true,
            threadPool: happyThreadPool
        }),
        new HappyPack({
            id: 'babel',
            loaders: [{
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true
                }
            }],
            verbose: true,
            threadPool: happyThreadPool
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, '../public/index.html'),
            minify: {
                collapseWhitespace: true,
                collapseInlineTagWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true
            },
            inject: 'body'
        })
    ]
}