webpack配置学习二-开发环境和打包环境执行不同打包

gxyz 发布于2019-08-23 13:46 / 1575人阅读

摘要：分开配置的原因前端项目的开发在开发过程中和上线时需要的依赖是不同的，所以要求使用打包的时候要能够在两种情况下执行不同的配置。在中的属性中配置开发打包命令和上线打包命令，指定不同的配置文件。

分开配置的原因

前端项目的开发在开发过程中和上线时需要的依赖是不同的，所以要求使用webpack打包的时候要能够在两种情况下执行不同的配置。带来的好处是上线的项目不依赖开发下的包，减少生产环境中所需要请求的依赖从而提升页面的性能。

常见的做法 使用不同的配置文件

在项目的中创建两个配置文件，分别对应的开发环境和生产环境。因为两个配置文件有很多共通的基础配置，可以通过引入公共配置的方法减少重复的配置代码。例如，创建名为webpack.base.config.js的文件，该文件中写入共通的基础配置代码。分别创建名为webpack.dev.config.js和webpack.prod.config.js，分别对应开发时和上线时的配置文件。在这两个文件头部引入webpack.base.config.js，根据需求在基本配置的基础上添加各自个性化的配置需求。

在package.json中的scripts属性中配置开发打包命令和上线打包命令，指定不同的配置文件。例如{"scripts":{"build":"webpack --config webpack.prod.config.js","dev":"webpack --config webpack.dev.config.js"}}。这样就可以实现了不同的配置文件对开发和生产两种环境下个性化打包需求。

完成这些工作之后就可以在命令行中通过npm run build和npm run dev来执行package中配置的脚本了。

使用环境变量参数

当开发环境和生产环境依赖的包差别不太大的时候，为了简单还可以将所有的配置写在一个配置文件之中，通过读取参数的方式输出不同的配置对象。
方法是首先配置基本的配置项，然后判断当前是否处于开发状态下，如果是开发状态往配置项里面添加配置。例如配置对象是config，如果当前是开发状态，需要添加plugin。则config.plugin.push(new webpackHtmlPlugin())。

传参的方式

判断的方式是在package.json中脚本加上环境变量NODE_ENV，例如
{"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","dev":"NODE_ENV=deveploment webpack --config webpack.config.js"}}

读参的方式

const isDev = process.env.NODE_ENV === "development"

云服务器 GPU云服务器 Webpack打包分块 python打包执行开发环境配置 python开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99522.html

webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
React系列---Webpack环境搭建（三）打包性能优化

摘要：的选项中，是文件的输出路径是暴露的对象名，要跟保持一致是解析包路径的上下文，这个要跟下面要配置的保持一致。最后修改一下模板，增加引用文件给入口文件再加点依赖模块，方便打包观察运行打包可以看到，入口文件里依赖的，模块，直接引用了。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境...

Jason_Geng 2019-08-20 17:39 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

frank_fun 2019-08-21 17:16 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

lwx12525 2019-08-01 17:50 评论0 收藏0
webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0