hm-react-cli/webpack.config.js

Create a Huimei React project by module

const path = require('path');
const theme = require(path.join(__dirname, '/package.json')).theme;
const HtmlWebpackPlugin = require('html-webpack-plugin'); //html
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //多线程压缩
const ExtendedDefinePlugin = require('extended-define-webpack-plugin'); //全局变量
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清空
const CopyWebpackPlugin = require('copy-webpack-plugin'); //复制静态html
const ReplaceHtmlPlugin = require('./plugin/ReplaceHtmlPlugin');
const webpack = require('webpack');
const es3ifyPlugin = require('es3ify-webpack-plugin');

const HappyPack = require('happypack'); //多线程运行
var happyThreadPool = HappyPack.ThreadPool({ size: 4 });
const devtool = {
    dev: 'cheap-eval-source-map',
    development: 'cheap-eval-source-map',
    production: 'source-map'
};

const PORT = 8000;
const publicPath = {
    dev: './',
    development: '/',
    production: './'
};

const minimize = {
    dev: false,
    development: false,
    production: true
};

/**
 * 公共插件
 */
const pluginsPublic = [
    new HtmlWebpackPlugin({
        template: `${__dirname}/src/index.html`, //源html
        inject: 'body', //注入到哪里
        filename: 'index.html', //输出后的名称
        hash: true, //为静态资源生成hash值
        showErrors: true,
        // favicon: './src/assets/images/favicon.ico'
    }),

    new MiniCssExtractPlugin({
        chunkFilename: '[chunkhash].css'
    }),

    new HappyPack({
        //多线程运行 默认是电脑核数-1
        id: 'babel', //对于loaders id
        loaders: ['cache-loader', 'babel-loader?cacheDirectory'], //是用babel-loader解析
        threadPool: happyThreadPool,
        verboseWhenProfiling: true //显示信息
    })
];
/**
 * 公共打包插件
 */
const pluginsBuild = [
    new ExtendedDefinePlugin({
        //全局变量
        __LOCAL__: false
    }),
    new CleanWebpackPlugin(['dist'], {
        root: __dirname
    }),
    new CopyWebpackPlugin([
        { from: 'dll/Dll.js', to: path.resolve(__dirname, 'dist') },
        { context: 'src/', from: 'assets/**', to: path.resolve(__dirname, 'dist') }
    ]),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('./dll/manifest.json')
    })
];

const plugins = {
    dev: [].concat(pluginsPublic, pluginsBuild, new ReplaceHtmlPlugin()),
    development: [].concat(
        pluginsPublic,
        new ExtendedDefinePlugin({
            //全局变量
            __LOCAL__: true
        })
    ),
    production: [].concat(pluginsPublic, pluginsBuild, new ReplaceHtmlPlugin(), new es3ifyPlugin())
};
// optimization ie8
const minimizer = {
    dev: [],
    development: [],
    production: [].concat(
        new UglifyJsPlugin({
            parallel: true,
            cache: true,
            sourceMap: true,
            uglifyOptions: {
                ie8: true,
                output: {
                    comments: false,
                    beautify: false
                },
                compress: {
                    properties: false,
                    drop_console: false,
                    drop_debugger: true
                }
            },
            exclude: /(node_modules|bower_components)/
        })
    )
};

module.exports = (env, argv) => {
    const dev = env.dev;
    return {
        devServer: {
            // static: {
            //     directory: path.join(__dirname, 'web'),
            // },
            // publicPath: path.join(__dirname, 'web'),
            contentBase: ['./src/','./web/'],
            compress: true, //开发服务器是否启动gzip等压缩
            port: PORT, //端口
            host: '0.0.0.0',
            useLocalIp: true,
            historyApiFallback: true //不会出现404页面，避免找不到
        },
        devtool: devtool[dev], //cheap-eval-source-map  是一种比较快捷的map,没有映射列
        performance: {
            maxEntrypointSize: 250000, //入口文件大小，性能指示
            maxAssetSize: 250000, //生成的最大文件
            hints: 'warning' //依赖过大是否错误提示
        },
        entry: {
            index: './src/app.js'
        },
        output: {
            //出口
            path: path.resolve(__dirname, 'dist'), //出口路径
            chunkFilename: '[name]-[hash].js',
            filename: '[name].js',
            publicPath: publicPath[dev] //公共路径,
        },

        resolve: {
            mainFields: ['main', 'jsnext:main', 'browser'], //npm读取先后方式  jsnext:main 是采用es6模块写法
            alias: {
                'rc-align': path.resolve(__dirname, 'package-modules/rc-align'),
                'dom-align': path.resolve(__dirname, 'package-modules/dom-align'),
                anujs: path.resolve(__dirname, 'package-modules/anujs'),
                'rc-trigger': path.resolve(__dirname, 'package-modules/rc-trigger'),
                'rc-calendar': path.resolve(__dirname, 'package-modules/rc-calendar'),
                'rc-animate': path.resolve(__dirname, 'package-modules/rc-animate'),
                // 框架相关包替换
                react: 'anujs/dist/ReactIE',
                'react-dom': 'anujs/dist/ReactIE',
                redux: 'anujs/lib/ReduxIE', /// This is mainly for IE6-8, because of the poor performance of the isPlainObject method in the official source code.
                'prop-types': 'anujs/lib/ReactPropTypes',
                rematch: 'anujs/dist/Rematch.js',

                //快捷入口
                api: path.resolve(__dirname, 'src/api'),
                components: path.resolve(__dirname, 'src/components/'),
                pages: path.resolve(__dirname, 'src/pages/'),
                styles: path.resolve(__dirname, 'src/styles/'),
                lib: path.resolve(__dirname, 'src/lib/'),
                util: path.resolve(__dirname, 'src/lib/util/'),
                server: path.resolve(__dirname, 'src/lib/server'),
                svg: path.resolve(__dirname, 'src/images/svg/'),
                images: path.resolve(__dirname, 'src/images'),
                img: path.resolve(__dirname, 'src/images')
            }
            //配置别名，在项目中可缩减引用路径
        },
        module: {
            noParse: /node_modules\/(moment|chart\.js)/, //不解析
            rules: [
                {
                    test: /\.js$/,
                    exclude: [/app\/lib/, /node_modules/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                sourceMap: minimize[dev]
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: [
                        { loader: MiniCssExtractPlugin.loader },
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: minimize[dev], //压缩
                                sourceMap: minimize[dev]
                            }
                        }
                    ]
                },

                {
                    test: /\.(png|jpg|gif|jpeg|ttf|svg)$/,
                    exclude: /(node_modules|bower_components)/,
                    include: [
                        path.resolve(__dirname, 'src/assets/images'),
                        path.resolve(__dirname, 'src/assets/images')
                    ],
                    use: [
                        {
                            loader: 'url-loader', //limit 图片大小的衡量，进行base64处理
                            options: {
                                esModule: false, // 这里设置为false
                                limit: 8,
                                name: 'images/[name].[ext]',
                                publicPath: '/assets/'
                            }
                        },
                        {
                            loader: 'file-loader',
                            options: {
                                // 配置参数
                                // 这种配置语法叫做：占位符
                                name: '[path][name].[ext]' // 使用图片的名字，并使用图片的后缀
                            }
                        }
                    ]
                },

                {
                    test: /\.less/,
                    use: [
                        { loader: MiniCssExtractPlugin.loader },
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: minimize[dev], //压缩
                                sourceMap: minimize[dev]
                            }
                        },
                        { loader: 'less-loader', options: { modifyVars: theme } }
                    ]
                }
            ]
        },

        target: 'web',
        plugins: plugins[dev],
        optimization: {
            minimizer: minimizer[dev],
            splitChunks: {
                chunks: 'async',
                minSize: 200,
                // minRemainingSize: 0,
                minChunks: 1,
                maxAsyncRequests: 30,
                maxInitialRequests: 30,
                cacheGroups: {
                    vendors: {
                        name: 'chunk-vendors',
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        chunks: 'initial'
                    },
                    common: {
                        name: 'chunk-common',
                        minChunks: 2,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true
                    }
                }
            },
            
        }
    };
};