【webpack】六、webpack开发环境和生产环境的区分打包

最新推荐文章于 2024-04-29 15:18:37 发布
最新推荐文章于 2024-04-29 15:18:37 发布
阅读量2.4k 收藏 4
点赞数 2
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41205144/article/details/113448187
版权

Development和Production模式的区分打包

文章目录


当我们的项目中只有一个webpack配置文件时，每次为了把项目打包发布到生产环境，都需要对应的修改一些配置项才能打包到dist目录下，需要继续开发时，又得重新将配置项改回生产环境的配置，这时 Development和Production模式的区分打包应运而生。

Development：开发环境

创建webpack.dev.js，或者将项目根目录下存在的webpack.config.js重命名为webpack.dev.js，表示它是开发环境的配置文件

image-20210130155407988

webpack.dev.js内容如下

//引入node的核心模块 path
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

/**
 * commonJs语法
 */
module.exports = {
  //指定项目的模式 production:生产环境 development:开发环境
  mode: 'development',
  devtool: 'source-map',
  // devtool: 'none',
  //指定入口文件，从哪个文件开始打包
  //entry对象可以简写为如下形式
  //entry: './src/index.js',
  entry: {
    main: './src/index.js',
  },
  //使用webpackDevServer为我们实现服务端的功能
  devServer: {
    //指定服务端的路径
    contentBase: './dist',
    //open为true，项目启动时会自动打开浏览器访问项目
    open: true,
    port: 8080,
    proxy: {
      '/api': 'http://localhost:8081'
    },
    //让webpackDevServer开启hot module replacement功能
    hot: true,
    //当hot module replacement功能没生效时，也不允许浏览器重新加载
    hotOnly: true
  },
  module: {
    rules: [{
      //正则匹配文件后缀
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          //通过使用Placeholders（占位符）的方式，指定打包后的文件名使用原文件名，更多具体用法参考官网file-loader的placeholder用法
          name: '[name].[ext]',
          //指定打包输出路径
          outputPath: 'images/',
          //当文件小于20KB时,直接将文件以Base64编码的形式打包到js文件中，而不是生成到outputPath指定的文件夹中。
          limit: 1024 * 20
        }
      }
    }, {
      //正则匹配scss文件后缀
      test: /\.scss$/,
      //引入处理css、sass、自动补全浏览器兼容属性的loader
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            // modules: true
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      //正则匹配css文件后缀
      test: /\.css$/,
      //引入处理css、sass、自动补全浏览器兼容属性的loader
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    },{
      //正则匹配文件后缀
      test: /\.(eot|ttf|svg|woff)$/,
      use: {
        loader: 'file-loader'
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(['dist']),
    //引入webpack热模块更新插件
    new webpack.HotModuleReplacementPlugin()
  ],
  //打包后的文件和其输出目录
  output: {
    filename: '[name].js',
    //调用path模块的resolve方法
    //node中_dirname这个变量，实际指的就是webpack.config.js这个文件所在目录的路径。
    //传入的'bundle'，最终拼接出来的路径就是打包后输出的目录
    //如果不配置path, webpack会默认在我们根目录下创建一个名为dist的目录作为打包输出目录
    path: path.resolve(__dirname, 'dist')
  }
}

Production：生产环境

然后创建webpack.prod.js，表示它是生产环境的配置文件

image-20210130173819646

webpack.prod.js内容如下

//引入node的核心模块 path
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

/**
 * commonJs语法
 */
module.exports = {
  //指定项目的模式 production:生产环境 development:开发环境
  mode: 'production',
  devtool: 'cheap-module-source-map',
  // devtool: 'none',
  //指定入口文件，从哪个文件开始打包
  //entry对象可以简写为如下形式
  //entry: './src/index.js',
  entry: {
    main: './src/index.js',
  },
  module: {
    rules: [{
      //正则匹配文件后缀
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          //通过使用Placeholders（占位符）的方式，指定打包后的文件名使用原文件名，更多具体用法参考官网file-loader的placeholder用法
          name: '[name].[ext]',
          //指定打包输出路径
          outputPath: 'images/',
          //当文件小于20KB时,直接将文件以Base64编码的形式打包到js文件中，而不是生成到outputPath指定的文件夹中。
          limit: 1024 * 20
        }
      }
    }, {
      //正则匹配scss文件后缀
      test: /\.scss$/,
      //引入处理css、sass、自动补全浏览器兼容属性的loader
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            // modules: true
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      //正则匹配css文件后缀
      test: /\.css$/,
      //引入处理css、sass、自动补全浏览器兼容属性的loader
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    },{
      //正则匹配文件后缀
      test: /\.(eot|ttf|svg|woff)$/,
      use: {
        loader: 'file-loader'
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(['dist']),
  ],
  //打包后的文件和其输出目录
  output: {
    filename: '[name].js',
    //调用path模块的resolve方法
    //node中_dirname这个变量，实际指的就是webpack.config.js这个文件所在目录的路径。
    //传入的'bundle'，最终拼接出来的路径就是打包后输出的目录
    //如果不配置path, webpack会默认在我们根目录下创建一个名为dist的目录作为打包输出目录
    path: path.resolve(__dirname, 'dist')
  }
}

在pakage.json中配置两种环境的命令

开发环境命令配置

修改package.json中scripts项，配置dev命令指向webpack.dev.js文件，运行nmp run dev命令时，将会使用webpack.dev.js配置文件启动项目

image-20210130174652840

生产环境命令配置

修改package.json中scripts项，配置build命令指向webpack.prod.js文件，运行nmp run build命令时，将会使用webpack.prod.js配置文件对项目进行打包

image-20210130175319638

上面的方案虽然解决了开发环境和生产环境区分打包的问题，但是由于这两个配置文件中存在大量重复的配置代码，接下来我们需要将这些重复的代码提取出来。

使用webpack-merge提取出两个环境中的通用配置

对比webpack.dev.js和webpack.prod.js两个文件，发现有许多重复的配置项，这边可以将这些重复的配置提取出来。

考虑到将重复的配置项提取出来后，再执行dev和build命令时需要读取被提取出去的那部分配置，这边需要安装一个模块——webpack-merge

安装合并模块

npm install webpack-merge --save-dev

webpack.common.js

创建webpack.common.js文件，将dev和build两个文件中的重复代码提取到其中，内容如下

//引入node的核心模块 path
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  //指定入口文件，从哪个文件开始打包
  //entry对象可以简写为如下形式
  //entry: './src/index.js',
  entry: {
    main: './src/index.js',
  },
  module: {
    rules: [{
      //正则匹配文件后缀
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          //通过使用Placeholders（占位符）的方式，指定打包后的文件名使用原文件名，更多具体用法参考官网file-loader的placeholder用法
          name: '[name].[ext]',
          //指定打包输出路径
          outputPath: 'images/',
          //当文件小于20KB时,直接将文件以Base64编码的形式打包到js文件中，而不是生成到outputPath指定的文件夹中。
          limit: 1024 * 20
        }
      }
    }, {
      //正则匹配scss文件后缀
      test: /\.scss$/,
      //引入处理css、sass、自动补全浏览器兼容属性的loader
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            // modules: true
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      //正则匹配css文件后缀
      test: /\.css$/,
      //引入处理css、sass、自动补全浏览器兼容属性的loader
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    },{
      //正则匹配文件后缀
      test: /\.(eot|ttf|svg|woff)$/,
      use: {
        loader: 'file-loader'
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(['dist'], {
      root: path.resolve(__dirname, '../')
    }),
  ],
  //打包后的文件和其输出目录
  output: {
    filename: '[name].js',
    //调用path模块的resolve方法
    //node中_dirname这个变量，实际指的就是webpack.config.js这个文件所在目录的路径。
    //传入的'bundle'，最终拼接出来的路径就是打包后输出的目录
    //如果不配置path, webpack会默认在我们根目录下创建一个名为dist的目录作为打包输出目录
	path: path.resolve(__dirname, '../dist')
  }
}

webpack.dev.js

被提取重复代码后的webpack.dev.js文件内容如下

const webpack = require('webpack');
//引入合并模块
const {merge} = require('webpack-merge');
//引入提取出重复配置的通用模块
const commonConfig = require('./webpack.common.js');

 const devConfig = {
  //指定项目的模式 production:生产环境 development:开发环境
  mode: 'development',
  devtool: 'source-map',
  // devtool: 'none',

  //使用webpackDevServer为我们实现服务端的功能
  devServer: {
    //指定服务端的路径
    contentBase: './dist',
    //open为true，项目启动时会自动打开浏览器访问项目
    open: true,
    port: 8080,
    proxy: {
      '/api': 'http://localhost:8081'
    },
    //让webpackDevServer开启hot module replacement功能
    hot: true,
    //当hot module replacement功能没生效时，也不允许浏览器重新加载
    hotOnly: true
  },

  plugins: [
    //引入webpack热模块更新插件（开发环境独有）
    new webpack.HotModuleReplacementPlugin()
  ],

}

//合并通用环境和开发环境
module.exports = merge(commonConfig, devConfig);

webpack.prod.js

被提取重复代码后的webpack.prod.js文件内容如下

//引入合并模块
const {merge} = require('webpack-merge');
//引入提取出重复配置的通用模块
const commonConfig = require('./webpack.common.js');

const productConfig = {
  //指定项目的模式 production:生产环境 development:开发环境
  mode: 'production',
  devtool: 'cheap-module-source-map',
 
}

//合并通用环境和生产环境
module.exports = merge(commonConfig, productConfig);

最后的优化

最后我们再做一点优化，我们发现有的框架里面，webpack的配置文件是放在一个build目录中的，在此，我们也将这3个配置文件放到build目录中

image-20210130224919913

再修改一下package.json中scripts里两个命令对应的文件路劲就大功告成啦！

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
 },
不明真相的程序员
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
4-4 webpack-区分开发环境和生产环境
xt_123456的博客
05-20 532
webpack-区分开发环境和生产环境 开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载或热模块替换能力和localhost server（本地服务器）。而在生产环境中，我们的目标则转向于关注更小的 bundle，以及资源的优化，以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。 具体步骤 1.安装 打开终端，进入项目文件夹的路径，输入安装命令为：cnpm install --save-dev webpack-merge 2.配置 (1)
webpack开发环境和生产环境切换原理.docx
07-14
Webpack 开发环境和生产环境切换原理 Webpack 是一个流行的前端构建工具，它提供了强大的模块化和代码打包功能。然而，在实际开发中，我们经常需要在开发环境和生产环境之间切换，以满足不同的需求。今天，我们将...
webpack环境 -- 开发环境和生产环境的区分
彩虹
07-31 8011
开发环境的需求: 模块热更新 sourceMap 接口代理 代码规范检查 生产环境的需求 提取公共代码 压缩混淆 文件压缩/base64编码 去除无用的代码 二者共同点: 同样的入口 同样的代码处理(loader处理) 同样的解析配置 使用webpack-merge拼接开发环境和生产环境: 配置文件: webpack.dev.conf.js webpack.p...
webpack 区分环境
qq_18422039的博客
04-29 864
在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象。在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如。这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个。有些时候，我们需要针对生产环境和开发环境分别书写webpack配置。
webpack--区分开发环境和生产环境
m0_74019046的博客
04-14 513
可以直接配置两个文件：dev。
Webpack配置区分开发环境和生产环境
weixin_30502157的博客
09-27 1006
　　在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境； 　　当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点： 　　开发...
vue项目打包之开发环境和部署环境的实现
10-15
总结起来，Vue项目打包的开发环境和部署环境实现关键在于区分和管理不同环境的配置。通过创建并配置多个入口文件，我们可以轻松地在开发和部署之间切换，同时避免手动修改代码导致的错误。这个过程不仅可以确保代码...
详解Webpack多环境代码打包的方法
12-09
在这里，`dev` 命令用于启动开发环境的服务器，`build` 用于打包生产环境的代码，而 `fev` 是为测试环境创建的打包命令。 接下来，你需要在 `build` 目录下创建对应的 `test.js` 文件，该文件将负责处理测试环境的...
webpack 开发和生产并行设置的方法
12-11
在创建 Web 应用程序时，我们需要区分开发环境和生产环境，因为它们对依赖项的需求不同。本文将详细介绍如何在 Webpack 配置中设置开发和生产环境，并行处理两者的需求。 首先，理解开发依赖和生产依赖的概念至关...
Webpack设置环境变量的一些误区详解
11-26
区分开发环境和生产环境的方法有很多种，以下是常见的几种方式： 1. **使用命令行**： - 写法一：在`package.json`的`scripts`中，可以设置默认的`mode`，但这种方式无法在Webpack配置文件中直接获取环境变量。 -...
webpack之拆分开发环境和生产环境配置
yangyanqin2545的博客
01-06 296
webpack之拆分开发环境和生产环境配置 1、拆分开发环境和生产环境配置 （1）公共路径 publicPath配置选项在各种场景中都非常有用，你可以通过它来指定应用程序中所有资源的基础路径 基于环境配置 在开发环境中，我们通常有一个assets/文件夹，它与索引页面位于同一级别，这没太大问题，但是，如果我们将所有静态资源托管至CDN。然后想在生产环境中使用呢？ 想要解决这个问题，可以直接使用一个enviroment variable(环境变量)，假如我们有一个变量ASSET_PATH: output: {
webpack之开发环境和生产环境的区分
麻瓜哇哇哇的博客
05-18 2648
如果我们想根据webpack的配置文件中的mode变量更改行为。那么必须导出一个函数而不是一个对象: const path=require("path") const VueLoaderPlugin = require('vue-loader/lib/plugin') let config={ //入口 entry:"", //出口 output:{}, ...
webpack基础篇（七）：拆分开发环境和生产环境配置
知之为知之，不知为不知
12-02 1025
我们手工的调整 `mode` 选项，可以实现`生产环境`和`开发环境`的切换，但很多配置在生产环境和开发环境中存在不一致的情况，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等等。 拆分开发环境和生产环境，让打包更灵活。
webpack学习笔记（九）拆分开发环境和生产环境配置
Paranoia_yy的博客
11-01 500
例如在开发环境中没有必要设置缓存，生产环境还需要设置公共路径等。
webpack5学习与实战-（九）-区分开发和生产环境的配置
weixin_42349568的博客
02-27 1295
一，公共路径output.publicPath 这个地默认值是：’’，也就是说webpack打包出来地html文件中，会以这个为基准，链接资源。 它的写法有三种情况： 1，写的是http这种带协议的完整路径，就是CDN，链接互联网资源 2，写的是相对于服务的 URL，例如"/assets/" 3，最常见的及默认的“”，都是相对于index.html的相对地址 output: { publicPath: "https://cdn.example.com/assets/", // CDN（总是 HT
webpack区分开发与生产
IT菜鸟
04-26 138
这个包是解决不同电脑上设置环境变量的方式不一样的问题；当然不装也可以获取node的process对象;可以跨平台设置环境和使用环境变量；
webpack开发环境和生产环境的配置区别
qq_40407998的博客
05-27 3318
1.定义： 开发环境：开发人员调试开发的一种环境: 方便调试，保持高效的开发 生产环境：发布上线的环境: 让程序在生产环境中正常有效的运行 开发环境的需求： 　　　　模块热更新 （本地开启服务，实时更新） 　　　　sourceMap (代码映射，方便打包调试) 　　　　接口代理　 (配置proxyTable解决开发环境中的跨域问题) 　　　　代码规范检查 (代码规范检查工具) 生产环境的需求： 　　　　提取公共代码　 　　 　　　　压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得
【零基础学习Webpack】webpack不同环境打包
球球博客
10-22 1088
Webpack区分环境打包 1、通过环境变量区分 webpack --env.production webpack.config.js中判断env 打包命令：webpack --env=production module.exports = (env, argv) => { if(env.production){ //生产环境的配置 }else{ //开发环境的配置 } } 2、通过不同的配置文件区分 cnpm install webpack-merge -D 创
webpack配置环境变量
最新发布
06-06
在Webpack中，我们可以使用环境变量来控制打包的行为。可以通过webpack的内置插件DefinePlugin来定义环境变量，使用方式如下： 1. 在webpack.config.js中引入webpack ``` const webpack = require('webpack'); ``` 2. 在plugins中配置DefinePlugin插件 ``` plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }) ] ``` 其中，process.env.NODE_ENV是一个常用的环境变量，用来区分开发环境和生产环境。 3. 在代码中使用环境变量 ``` if(process.env.NODE_ENV === 'production'){ // 生产环境下的代码 } else { // 开发环境下的代码 } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值