Powered by md-Blog  文 - 篇  访客 -

【配置分离】webpack-merge


  分类:Webpack  / 
更新:2020-03-24 16:32:28  /  创建:2020-03-24 16:26:24
不要删除

Why?

随着我们业务逻辑的增多,图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来,进而导致配置文件的增多,使得配置文件书写起来比较繁琐,更严重者(书写特定文件的位置会出现错误)。更由于项目中不同的生产环境和开发环境的配置,使得配置文件变得更加糟糕。使用单个的配置文件会影响到任务的可重用性,随着项目需求的增长,我们必须要找到更有效地管理配置文件的方法。这个时候,webpack-merge 便是你最优的选择方案。

安装

yarn add webpack-merge -D

原理

const merge = require("webpack-merge");
merge(
    {a : [1],b:5,c:20},
    {a : [2],b:10, d: 421}
)
//合并后的结果
{a : [1,2] ,b :10 , c : 20, d : 421}

现在我把 webpack.config.js 配置文件拆成:

  • webpack.common.js 公共配置文件
  • webpack.dev.js 开发配置文件
  • webpack.prod.js 生产配置文件

写法

基于本人的一个GitHub项目,最新版请点击:SoEasy-Webpack4.0-Templete。如果对您有所帮助,请别忘了点个 Star,谢谢!

以下配置仅供参考:

webpack.common.js
module.exports = {
    entry: './src/main.js',
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 10,
                        name: './static/images/[name]_[hash:6].[ext]',
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,   // 启用缓存,提高打包速度
                    }
                }
            },
        ]
    }    
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');   // 打包 html

module.exports = merge(common, {
    mode: "development",
    devtool: 'cheap-module-eval-source-map',
    devServer:{
        open: true,
        hot: true,
        inline: true,
        quiet: false
    },
    module: {
        rules: [
            {
                test: /\.(sc|c|sa)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    overrideBrowserslist:['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    },
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(), // HMR模式,在console中显示正确的名字
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            favicon: 'favicon.ico',
        })
    ]
})
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清空 dist
const MiniCssExtractPlugin = require('mini-css-extract-plugin');    // 提取 css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');  // 压缩 css
const HtmlWebpackPlugin = require('html-webpack-plugin');   // 打包 html

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: './static/js/main_[chunkhash:6].js',
    },
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.(sc|c|sa)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    overrideBrowserslist:['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    },
                    'sass-loader'
                ],
                include: /src/,
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: './static/css/[name]_[contenthash:6].css',
            chunkFilename: './static/css/[id]_[contenthash:6].css',
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        // HTML 压缩
        new HtmlWebpackPlugin({
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            },
            favicon: 'favicon.ico',
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
    ]
})

不要删除

小站不易,感谢支持!