webpack学习五：webpack的配置文件webpack.config.js分离，分离成开发环境配置文件和生产环境配置文件

本文链接：https://blog.csdn.net/qq_40036754/article/details/114042985

文章目录

前言
一、分离说明
- 1. webpack.config.js 名称固定
- 2. 生产环境和开发环境
三、分离内容
三、注意的地儿

前言

webpack的配置文件webpack.config.js中，包含了生产环境和开发环境时的所有配置，当打包时为了速率又要删除开发环境的配置，这样十分不友好，所以进行如下分离。

分离出来生产环境依赖配置文件(webpack.prod.config.js)和开发环境依赖配置文件(webpack.dev.config.js)，
将共有的才封装成一个配置文件 (webpack.base.config.js)

其余博客如下：

一、分离说明

1. webpack.config.js 名称固定

webpack的配置文件是 webpack.config.js，这个名称是固定的，如果删除了这个文件，然后进行npm run build打包，会报错，如下截图所示：
在这里插入图片描述
说明这个名称是固定的

2. 生产环境和开发环境

前面也说过
开发环境：项目在开发时所依赖的环境；在上线或者发布时，项目时不依赖的。
生产环境：项目上线或者发布时所以依赖的环境。
在webpack.config.js 配置文件中，有的配置属于开发时依赖，有的是属于生产时依赖，也有的依赖的两个环境都需要的。
项目上线时，一般不会打包开发时的依赖，这样就会影响速率。
所以便有了将webpack.config.js 配置文件进行分开。分成三个配置文件，如下：

webpack.base.config.js：两个环境公共的部分
webpack.dev.config.js：开发环境独有的配置
webpack.prod.config.js：生产环境独有的配置

三、分离内容

1. 分离插件依赖：webpack-merge

分成三个配置文件，引入时，需要用到依赖：webpack-merge

安装如下

npm install webpack-merge@4.1.5 --save-dev

将原来的配置文件webpack.config.js 中的内容复制三份到三个新的配置文件中，然后将这三个配置文件都放到build文件夹中，并且删除掉webpack.config.js配置文件。
目录如下：
其中uglifyjs-webpack-plugin插件的使用是生产环境时的依赖，webpack-dev-server插件的使用时开发环境时的依赖。此时就先举两例。

2. webpack.base.config.js

这个配置文件是生产环境和开发环境共有的webpack的配置。一会儿会在webpack.dev.config.js和webpack.peod.config.js这两个环境中进入的。（引入需要使用到刚才安装的依赖插件webpack-merge）
删除（这里先注释）掉uglifyjs-webpack-plugin和webpack-dev-server这两个插件的使用。
内容如下

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'), // __dirname: 当前文件的目录
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                /*
                * 使用多个 loader时，从右往左执行
                * css-loader : 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
                * style-loader: 将模块的导出作为样式添加到 DOM 中
                * */
                test: /\.css$/, use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载的图片，小于 limit 时，会将图片编译成 base64字符串形式
                            // 当加载的图片，大于 limit 时，会使用 file-loader 模块进行加载
                            limit: 8192,
                            // 这个 name 配置  可以在 file-loader 的官网中看到
                            /*
                            * img 文件夹
                            * [name] 传过来的图片名称
                            * [hash:8] 哈希值取前8位
                            * [ext] 带上ext
                            * */
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.m?js$/,
                // 排除 一些包
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        // import 文件时，可以不写后缀，在这里配置，但是我这里不写配置不写后缀也可以成功。
        extensions: ['.js', '.css', '.vue'],
        // alias： 别名， $：以vue为结尾的
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归冯安晨所有！！！'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        // new uglifyJsPlugin()
    ],
    // devServer: {
    //     contentBase: './dist',
    //     inline: true
    // }
}

主要修改地方如下：

3. webpack.dev.config.js

这里只保留开发环境时用到的插件依赖webpack-dev-server即可。然后删除共有的，在引入webpack.base.config.js即可

内容如下：

const webpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')

module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: './dist',
        inline: true
    }
})

4. webpack.prod.config.js

这里只保留生产环境时用到的插件依赖uglifyjs-webpack-plugin即可。然后删除共有的，在引入webpack.base.config.js即可

内容如下：

const baseConfig = require('./webpack.base.config')

const webpackMerge = require('webpack-merge')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = webpackMerge(baseConfig, {
    plugins: [
        new uglifyJsPlugin()
    ]
})

5. 修改package.json 中的script脚本

这里没有了webpack.config.js，在使用 npm run build 和 npm run dev 就会报最上面的错误，所以这里要指定webpack的配置文件
配置修改如下：

文件如下：

{
  "name": "webpack_vue",
  "version": "1.0.0",
  "description": "1. css\r ```$xslt\r npm install --save-dev css-loader@2.0.2\r npm install --save-dev style-loader@0.23.1 --force\r ```\r 1. less\r ```$xslt\r npm install less-loader@4.1.0 less@3.9.0 --save-dev --force\r ```\r 3. 图片\r ```$xslt\r npm install url-loader@1.1.2 --save-dev --force\r npm install file-loader@3.0.1 --save-dev --force\r ```",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config build/webpack.prod.config.js",
    "dev": "webpack-dev-server --open --config build/webpack.dev.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^1.1.2",
    "vue": "^2.6.12",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.1.5"
  }
}

到了这里，再使用打包命令或者开启本地服务器命令都可以执行成功了。

三、注意的地儿

当webpack.base.config.js 基础配置文件整理过后，一定要记得修改打包后输出文件的路径，然后会打包到 build/dist 中的。修改如下：

    output: {
        path: path.resolve(__dirname, '../dist'), // __dirname: 当前文件的目录
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },