文章目录
  • 前言
  • 一、分离说明
  • 1. webpack.config.js 名称固定
  • 2. 生产环境和开发环境
  • 三、分离内容
  • 1. 分离插件依赖：webpack-merge
  • 2. webpack.base.config.js
  • 3. webpack.dev.config.js
  • 4. webpack.prod.config.js
  • 5. 修改package.json 中的script脚本
  • 三、注意的地儿

前言

  • webpack的配置文件​​webpack.config.js​​中，包含了生产环境和开发环境时的所有配置，当打包时为了速率又要删除开发环境的配置，这样十分不友好，所以进行如下分离。
  1. 分离出来生产环境依赖配置文件(webpack.prod.config.js)和开发环境依赖配置文件(webpack.dev.config.js)，
  2. 将共有的才封装成一个配置文件 (webpack.base.config.js)

一、分离说明

1. webpack.config.js 名称固定

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

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


说明这个名称是固定的

2. 生产环境和开发环境

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

三、分离内容

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

  1. 分成三个配置文件，引入时，需要用到依赖：​​webpack-merge​​
  2. 安装如下

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


  2. 将原来的配置文件​​webpack.config.js​​​ 中的内容复制三份到三个新的配置文件中，然后将这三个配置文件都放到​​build文件夹​​​中，并且删除掉​​webpack.config.js​​​配置文件。
    目录如下：

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

  4. 其中​​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的配置文件

  • 配置修改如下：

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



  • 文件如下：
  • {
      "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/'
    },