webpack详细配置（二）

webpack配置（二）

配置开发环境与生产环境

抽取公共部分代码进行合并 webpack.common.js：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path')

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: [["@babel/preset-env", {
                        targets: {
                            chrome: "67"
                        },
                        useBuiltIns: 'usage'
                    }]]
                }
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 10240
                    }
                }
            },
            {	
                test: /\.(svg|eot|ttf|woff)$/,
                use: {
                    loader: 'file-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    optimization: {
        // 配置 Tree Shaking 只支持 ES Module，不支持common.js
        // Tree Shaking意思是只打包你引用进来并且使用了的模块，而不是打包引用进来模块的全部内容
        // 如果是 production 环境下 devtool: 'cheap-module-source-map',就不需要进行下面的配置
        // 还需要在package.json 中配置 sideEffects ，处理需要特殊处理的文件，比如css文件，@babel/polyfill 这种进行低版本浏览器处理的文件
        usedExports: true,
        // SplitChunksPlugin
        // 配置 Code Splitting 进行同步的代码分割，把业务代码与引入的库的代码进行分割
        // 异步代码分割可以使用import函数，需要借助babel的插件，无需配置会进行自动代码分割
        splitChunks: {
            chunks: "all", //async对异步代码生效 all对所有代码生效，不管同步异步，如果配置了all需要配置cacheGroups
            minSize: 30000, // 30000 字节 大于这个数字就会进行代码分割
            minChunks: 1,  // 超过两个chunk都引入了这个依赖文件那么就进行打包分割
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~', // 打包出来文件的连接符
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/, // 是否是这个目录下，如果是那么就一起打包在 vendors.js
                    priority: -10,
                    //filename: 'vendors.js' // 配置打包出来的文件的文件名
                },
                // 默认讲打包出来的代码放置的位置，不在 node_modules 引入的
                default: {
                    priority: -20,
                    reuseExistingChunk: true,
                   // filename: 'common.js' // 配置打包出来的文件的文件名
                }
            }
        }
    },
    output: {
        // publicPath: 'http://cdn.com.cn', 
        publicPath: "/",
        path: path.resolve(__dirname, 'dist')
    }
}

webpack.dev.js：

const webpack = require('webpack')
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')

const devConfig = {
    mode: 'development',
    devtool: 'cheap-module-evel-source-map', 
    devServer: {
        contentBase: './dist',
        open: true,
        port: '8080',
        hot: true,
     	hotOnly: true
    },
        module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output:{
        filename: '[name].js', // 打包入口文件的名字
        chunkFilename: '[name].chunk.js', // 打包间接引入的chunk文件名字
    }
}

// 合并模块需要安装需要安装 webpack-merge
module.exports = merge(commonConfig, devConfig)

使用了optimization需要配置sideEffects，具体配置如下

webpack.prod.js：

const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const commonConfig = require('./webpack.common')

const proConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
        module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
        ]
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({})//压缩MiniCssExtractPlugin分割之后的代码
        ]
    },
    plugins: [
        // 配置css的代码分割，因为这个插件不支持HMR,所以只适合生产环境使用
        // 同时处理生产环境的style-loader要替换成MiniCssExtractPlugin.loader
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    output:{
        filename: '[name].[contenthash].js', // 打包入口文件的名字，线上环境配置上contenthash防止浏览器缓存才来的问题
        chunkFilename: '[name].[contenthash].chunk.js', // 打包间接引入的chunk文件名字，线上环境配置上contenthash防止浏览器缓存才来的问题
    }
}
// 合并模块需要安装需要安装 webpack-merge 
module.exports = merge(commonConfig, proConfig)