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

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量906 收藏 2
点赞数 1
分类专栏： maven、npm、webpack 文章标签： vue npm webpack plugin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40036754/article/details/114042985
版权

文章目录

前言

  • 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.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/'
    },
java冯坚持
关注
专栏目录
webpack.config.js配置文件
06-19
最近刚学的webpack3.0，从零到一套相对比较齐全的配置
webpack教程之webpack.config.js配置文件
10-19
`webpack.config.js` 文件是 Webpack 的核心配置文件，它定义了项目的输入、输出、加载器、插件等设置。这篇教程将带你了解如何配置 `webpack.config.js` 文件。 首先，安装 `html-webpack-plugin` 插件。这个插件...
webpack.dev.config
diboxuan0073的博客
02-01 173
/** * Created by wensonsmith on 2017/12/5. */ const path = require('path') const webpack = require('webpack') const DashboardPlugin = require('webpack-dashboard/plugin') const ExtractTe...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 3947
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
webpack webpack.config.js的分离
lzc2644481789的博客
08-05 576
一、简介 1. 本文主要介绍对webpack.config.js进行拆分，让开发时需要的配置和发布时需要的配置进行分离。 2. 新建三个js文件: base.config.js、prod.config.js、dev.config.js。base.config.js表示基础配置，prod.config.js表示发布的时候的webpack配置，dev.config.js表示开发时的webpack配置文件。 二、...
vue-cli分析-webpack.dev.config.js
weixin_34384557的博客
08-08 2413
本系列文章主要讲下vue的webpack脚手架的前因后果,逐行分析其操作。如果写的有问题请务必指出！如果觉得写的还不错点个赞就是对我最大的鼓励了,谢谢！ 架构说明 当使用vue-cli脚手架生成项目后,项目架构与其作用大概是这样的： build负责针对不同编译环境,webpack采用哪些配置,摒弃哪些机制相关 config是build编译文件的另外扩展,把需要用到的配置提取出来,让配置更模块化 ...
webpack.dev.conf.js详解
xuyizhuo的博客
10-30 4177
webpack.dev.conf.js详解 转载自https://www.cnblogs.com/ye-hcj/p/7087205.html 1.1 说明 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请在1.3中查看 1.2 代码配置 // 引入当前目录中的utils工具配置文件 // 请自行查看我博客中的utils.js的相关文章 var utils = require('./utils')...
webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server
05-05
修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。 注意：只支持 webpack/webpack-dev-server 两个命令。 安装...
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
总之，通过`vue.config.js`配置`copy-webpack-plugin`，我们可以确保`static`文件夹下的静态文件在构建过程中得到正确处理，避免了因未引用而被忽略的问题。这个方法对于处理动态加载的外部数据文件或其他不希望被...
webpack.dev.conf.js
一梦醉殇
12-26 886
var utils = require('./utils')//封装了一些方法的工具 var webpack = require('webpack')//使用 webpack var config = require('../config')//使用 config/index.js var merge = require('webpack-merge')//使用 webpack
webpack配置文件：webpack.config.js
热门推荐
03-01 1万+
1、webpack的配置文件webpack.config.jsmodule.exports = { entry:'./src/script/main.js', output:{ path:'./dist/js', filename:'bundle.js' } }上面代码是一个最最基本的webpac配置文件，entry是指定要打包的入口文件，ou
webpack代码分离
陈开心的博客
02-03 402
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 常用的代码分离方法有三种： 入口起点：使用 entry 配置手动地分离代码。 防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。 动态导入：通过模块的内联函数调用来分离代码。 入口起点 这是迄今为止最
webpack 分离css html,webpack分离css和js
weixin_36246453的博客
06-20 295
下载各种loader:babel-loader (解析 es6/7 -> es5)@babel/core(4.0) (这个文件编译器)@babel/preset-env(4.0) (生成es5标准)css-loader (处理css)sass-loader (处理sass) node-sass(编译器)style-loader (给你HTML页面 插入style标签生成css代码)file-...
webpack.base.conf.js
u011927449的博客
05-31 986
var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoaderConfig = require('./vue-loader.conf') // 给出正确的绝对路径function resolve (dir) { return path.join(__dirname, '..', dir)} module.exports = {// 配置webpack编译入口 en
AndroidStudio中AAR/JAR的生成以及使用
BigManing的博客
03-22 1736
前提 使用AndroidStudio新建一个project，名字叫Test 在工程里新建一个module（library类型的），叫OneSDK， 工程Test不用依赖这个library。 在OneSDK中写入代码/放置资源（如果要混淆，要设置 minifyEnabled true，并设置好proguard-rules.pro） aar组成：class文件+清单文件+资源文件生成 执行这个命令
webpack中的webpack.base.config.js 和webpack.config.js有什么区别 ？
Haines
08-21 6373
一直有点疑问webpack命名的问题，有很多的名字，也是醉了，就比如： webpack.base.config.js webpack.config.js  webpack.production.js webpack.devserver.js webpack......... 查询了一下才知道：原来是随便命名的.......... 答案： 1.这些文件都是有什么不同 ，还是随意取名？...
vue webpack.base.config.js
coffee3139564344的博客
06-27 4350
其中的webpack.base.conf.js是一个基础的的环境配置，里面写的个各个环境（包括开发环境，生产环境，测试环境）都需要的配置可以认为是公共部分。比如说入口文件和输出文件这类，然后开发环境的webpack的配置webpack.dev.conf.js中开头位置有这么一句：module.exports = merge(baseWebpackConfig, {
webpack.base.config
asd2014916的博客
02-01 174
/** * Created by wensonsmith on 2017/12/5. */ const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextP...
Webpack配置文件分离实战：优化项目结构
1. **多文件拆分**：在每个环境（如开发和生产）下创建独立的配置文件，通过`--config`参数指定使用的配置，例如webpack.development.js和webpack.production.js。 2. **库或工具引用**：将配置文件存放在外部库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java冯坚持

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值