webpack-merge 分离生产环境和开发环境

注意：本进阶在webpack进阶【12】的基础上进行衍生。

一、为什么需要分离生产环境、开发环境

• 1. 我们现在的webpack配置是建立一个 webpack.config.js 文件中进行的。如果是大项目的话，开发和生产环境需要配置的项很多，全部放在 webpack.config.js 中太乱，不清晰。这时我们需要用 webpack-merge 来帮助我们分离出来生产环境和开发环境。

二、下载 webpack-merge及应用

• 1. 下载 webpack-merge

cnpm i webpack-merge

• 2. webpack-merge 可以传入多个参数，会将多个参数合并成一个对象。如果有重复的属性名，后面的对象属性会覆盖前面的对象。如下

// 引入 merge
const merge = require('webapck-merge')
// 利用 merge方法进行合并对象，如下，合并出来的对象是{a: 2, c: 3}
const list = merge({a: 1}，{a: 2, c: 3})；

三、分离生产环境和开发环境

• 1、 新建一个 config 文件夹， config 文件夹下新建立 webpack.base.js 文件、webpack.dev.js 文件、webpack.pro.js 文件。如下：

  
  image.png
• 2、 webpack.base.js 文件是放开发环境和生产环境公共的部分。代码如下

// 存在开发环境和生产环境的公共配置

const path = require('path');                                       // 引入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');           // 引入自动生成 html 的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')     // 引入分享 css 的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')          // 引入打包时清除 dist 目录的插件,引入时需要用对象{}包裹起来
// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 打包入口，从哪个文件开始打包
    entry: './src/main.js',

    // 2. 打包的文件放在哪
    output:{
        // 打包的文件输出的目录（输出的目录必须是一个绝对路径）
        path: path.join(__dirname, '../dist'),
        // 打包后的文件名叫 bundle.js,在 dist 下面的 js 文件夹下面。
        filename: 'js/bundle.js'
    },
    

    // 4. 配置module模块加载规则
    // 默认，webpack只认识JSON,javascript，不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
    module: {
        rules: [
            // (1): 配置 .css 文件解析
            {
                // 正则： 匹配所有以 .css 结尾的文件
                test: /\.css$/,
                // 实际处理顺序：从右往左
                // css-loader: 让webpack能够识别解析 .css 文件
                // style-loader: 通过动态的创建 style 标签的方式（在打包好的bundle.js中），让解析后的 css 内容，能够作用到页面中
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            // (2): 配置 .less 文件解析
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            // (3): 配置 图片 文件解析
            {
                // 【i】表示忽视图片格式大小写 例如 .PNG
                test: /\.(jpg|png|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        // 如果图片太大再转成base64, 会让图片的体积增大 30% ，得不偿失。
                        options: {
                            // 图片超过 10k ,就不转成 base 文件，当图片小于 10k ，就转成 base 文件。
                            limit: 10 * 1024,
                            // 配置图片打包后在dist中的文件名, name: '[name].[ext]' 我们希望打包后的图片文件名和没打包前的图片名是一样的。
                            name: '[name].[ext]',
                            // 配置静态资源的引用路径。publicPath是打包后的 css 引用打包后的 图片的路径。意思是说css引用的的图片需要先回到上级，然后在 images 下寻找图片
                            publicPath: "../images/",
                            // 配置打包后的图片 dist 下的 images 文件夹下面。
                            outputPath: "images/"
                        }
                    }
                ]
            },
            // (4): 配置高版本的 js 的兼容性，例如 让 ES6 的语法能被浏览器识别
            {
                test: /\.js$/,
                // 不包含node_modules 下的 js，node_modules 下的 js 不用被 label-loader 进行转换
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    // 5. 插件配置
    plugins: [
        // 我们要把哪个目录下的 html 进行自动生成。
        new HtmlWebpackPlugin({template: './public/index.html'}),
        // 打包并分离出来的css叫什么名字，并在dist中的路径及路径名
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        }),
        // 打包时，把 dist 目录下的文件内容先清除
        new CleanWebpackPlugin()
    ], 
}

注意：当配置公共环境的时候， path.join 绝对路径需要改下，如下图所示：

image.png

• 3、webpack.dev.js 配置【开发环境】的内容，代码如下，需要引入 我们下载好的 【webpack-merge】来帮助我们合并 webpack.base.js 公共配置 和 开发环境的配置。

// 开发环境的配置（不需要压缩）

// 引入公共的环境的配置
const base = require('./webpack.base.js')
// 引入merge模块方法，merge方法可以把多个对象合并成一个对象，后面的对象覆盖前面的对象
const merge = require('webpack-merge');

// 把开发环境的配置进行导出
module.exports = merge(base, {
    // 1. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
    mode: 'development',
    // 2. 配置开发服务器，代码变化，自动刷新
    devServer: {
        // 浏览器网址上显示的端口号
        port: 8080,
        // 是否自动打开浏览器 
        open: true,
    }
})

• 4、webpack.pro.js 配置【生产环境】的内容，代码如下，需要引入 我们下载好的 【webpack-merge】来帮助我们合并 webpack.base.js 公共配置 和 生产环境的配置。

// 生产环境的配置（需要进行压缩）

// 引入公共环境
// 引入公共的环境的配置
const base = require('./webpack.base.js')
// 引入merge模块方法，merge方法可以把多个对象合并成一个对象，后面的对象覆盖前面的对象
const merge = require('webpack-merge');

// 把生产环境的配置进行导出
module.exports = merge(base, {
    // 1. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
    mode: 'production',
})

• 5、package.json中更改 dev 和 build的路径如下：

"scripts": {
   // 在 config 文件夹下的 webpack.dev.js
    "dev": "webpack-dev-server --config config/webpack.dev.js",
   // 在 config 文件夹下的 webpack.pro.js
    "build": "webpack --config config/webpack.pro.js"
  },

• 6、删除掉 webpack.config.js

  
  image.png
• 7 、现在我们的文件目录是这样的，所有的配置都在 config 文件夹下面
  image.png
• 8、执行本地开发服务,发现能自动帮我们打开浏览器

cnpm run dev

• 9、执行代码打包脚本，发现也能自动打包

cnpm run build