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

简介: 这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。

前言

  • webpack的配置文件webpack.config.js中,包含了生产环境和开发环境时的所有配置,当打包时为了速率又要删除开发环境的配置,这样十分不友好,所以进行如下分离。
  1. 分离出来生产环境依赖配置文件(webpack.prod.config.js)和开发环境依赖配置文件(webpack.dev.config.js),
  2. 将共有的才封装成一个配置文件 (webpack.base.config.js)
  • 其余博客如下:
  1. webpack学习一:什么是模块化开发,什么是webpack,以及二者之间的关系。
  2. webpack学习二:webpack初始用打包,webpack初始用配置文件打包,webpack安装对应的loader
  3. webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
  4. webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
  5. webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境和生产环境

一、分离说明

1. webpack.config.js 名称固定

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

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
    
  3. 将原来的配置文件webpack.config.js 中的内容复制三份到三个新的配置文件中,然后将这三个配置文件都放到build文件夹中,并且删除掉webpack.config.js配置文件。
    目录如下:
    在这里插入图片描述

  4. 其中uglifyjs-webpack-plugin插件的使用是生产环境时的依赖,webpack-dev-server插件的使用时开发环境时的依赖。此时就先举两例。

2. webpack.base.config.js

  • 这个配置文件是生产环境和开发环境共有的webpack的配置。一会儿会在webpack.dev.config.jswebpack.peod.config.js这两个环境中进入的。(引入需要使用到刚才安装的依赖插件webpack-merge
  • 删除(这里先注释)掉uglifyjs-webpack-pluginwebpack-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 buildnpm 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/'
    },
相关文章
|
11天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
42 1
|
2月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
72 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
2月前
|
JavaScript 前端开发 Java
webpack学习一:什么是模块化开发,什么是webpack,以及二者之间的关系。
这篇文章介绍了模块化开发的概念、历史和实现方式,以及webpack作为一个现代JavaScript应用的静态模块打包工具,它如何帮助我们将ES6等高级语法打包成浏览器可以识别的低级语法,并解释了npm在webpack安装和使用中的作用。
43 1
webpack学习一:什么是模块化开发,什么是webpack,以及二者之间的关系。
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
20 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
19 2
|
2月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
37 1
|
2月前
|
JavaScript
js学习--抽奖
js学习--抽奖
17 1
|
2月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
31 1
|
2月前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
52 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
39 0