webpack配置文件

一份我自己用的Webpack配置文件,感觉这个太复杂了,每次用webpack遇到最多的是报错,没找到module,简直了,特此留一份在博客上,方便以后复制。

const webpack = require('webpack');
const path = require('path');
const HappyPack = require('happypack');
const os = require('os'); // node 提供的系统操作模块
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});
module.exports = {
    context: path.join(__dirname),
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.js$/, // 匹配JS
                exclude: /node_modules/, // 排除
                use: 'happypack/loader?id=babel',
            },
            {
                test: /\.styl$/,
                use: ['css-hot-loader',MiniCssExtractPlugin.loader, 'css-loader','postcss-loader' , 'stylus-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: "file-loader",
                        query:{
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        chunkFilename: "[name].js",
        filename: "[name].js"
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), //添加 解决hot热更新无法解析得错误
        new webpack.NamedModulesPlugin(), //添加,官方推荐的帮助分析依赖的插件
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: "static.css",
            chunkFilename: "[id].[hash].css"
        }),
        require('autoprefixer'),
        new HappyPack({ // 基础参数设置
            id: 'babel', // 上面loader?后面指定的id
            loaders: [{
                loader:'babel-loader',
                query: {
                    cacheDirectory:true,
                    presets: ['@babel/preset-env', '@babel/preset-react'],
                    plugins: [
                        ['@babel/plugin-proposal-decorators', {legacy: true}],
                        ['@babel/plugin-proposal-class-properties', {loose: true}]
                    ]
                }
            }],
            threadPool: happyThreadPool,
            verbose: true,
        })
    ],
    // 分包
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache:true,
                parallel:true,
                sourceMap:true
            })
        ],
        runtimeChunk: {
            name: "manifest"
        },
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    priority: -20,
                    chunks: "all"
                }
            }
        }
    },
    // 热更新服务
    devServer: {
        port: 8080,
        inline: true, //添加
        hot: true,
        historyApiFallback: true
    },
};

这个文件包含了postcss所以还有份postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

对于,webpack这一方面啥不不懂,前端工程化走得太快了

分享 二维码
分类:代码笔记
标签:
还没有评论


在此输入评论..
0/100