webpack(7)-生产环境
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中,我们需要:强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面,关注点在于压缩 bundle、更轻量的 source map、资源优化等,通过这些优化方式改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。
虽然,以上我们将生产环境和开发环境做了略微区分,但是,请注意,我们还是会遵循不重复原则(Don't repeat yourself - DRY),保留一个 "common(通用)" 配置。为了将这些配置合并在一起,我们将使用一个名为 webpack-merge
的工具。此工具会引用 "common" 配置,因此我们不必再在环境特定(environment-specific)的配置中编写重复代码。
npm scripts
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
//让npm start
script 中webpack-dev-server
使用 development(开发环境) 配置文件
"start": "webpack-dev-server --open --config webpack.dev.js",
//npm run build
script 使用 production(生产环境) 配置文件
"build": "webpack --config webpack.prod.js"
}
}
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
// 默认运行webpack.config.js
"start": "webpack-dev-server --open",
"build": "webpack"
}
//webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
//清理dist文件夹,保证里面只有最新生成的文件
new CleanWebpackPlugin(['dist']),
//生成它自己的 index.html 文件,它会用新生成的 index.html 文件,替换我们的原有文件
new HtmlWebpackPlugin({
title: 'Production'
})
]
}
//webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
//webpack-merge 工具提供了各种 merge(合并) 高级功能
module.exports = merge(common, {
mode: 'development',
//能够将错误定位到源码,而不是压缩后到代码
//用于develipment环境
//强大的 source map
devtool: 'inline-source-map',
//提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能
//改任何源文件并保存它们,web server 将在编译代码后自动重新加载
//浏览器自动刷新
devServer: {
contentBase: './dist'
}
});
//webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
module.exports = merge(common, {
//webpack v4+ 会默认压缩你的代码
mode: 'production',
devtool: 'source-map'
});
指定mode
许多 library 通过与 process.env.NODE_ENV
环境变量关联,以决定 library 中应该引用哪些内容。例如,当不处于生产环境中时,某些 library 为了使调试变得容易,可能会添加额外的 log(日志记录) 和 test(测试) 功能。并且,在使用 process.env.NODE_ENV === 'production'
时,一些 library 可能针对具体用户的环境,删除或添加一些重要代码,以进行代码执行方面的优化。从 webpack v4 开始, 指定 mode
会自动地配置 DefinePlugin
:
技术上讲,NODE_ENV
是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境(dev-vs-prod)下,server tools(服务期工具)、build scripts(构建脚本) 和 client-side libraries(客户端库) 的行为。然而,与预期相反,无法在构建脚本 webpack.config.js
中,将 process.env.NODE_ENV
设置为 "production"
,请查看 #2537。因此,在 webpack 配置文件中,process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'
这样的条件语句,无法按照预期运行
任何位于 /src
的本地代码都可以关联到 process.env.NODE_ENV 环境变量
import { cube } from './math.js';
if (process.env.NODE_ENV !== 'production') {
console.log('Looks like we are in development mode!');
} function component() {
var element = document.createElement('pre'); element.innerHTML = [
'Hello webpack!',
'5 cubed is equal to ' + cube(5)
].join('\n\n'); return element;
} document.body.appendChild(component());
webpack(7)-生产环境的更多相关文章
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- Webpack配置区分开发环境和生产环境
在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...
- vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用
大家都知道webpack打包十分方便,但是在工作中,前端写好的项目需要后端进行部署,就需要有一个配置文件. 使用插件 : GenerateAssetPlugin , 使用方法 : 1 在项目中安装 ...
- webpack开发与生产环境配置
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...
- 分离Webpack开发环境与生产环境的配置
这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- webpack开发环境配置和生产环境配置
开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...
- webpack深入场景——开发环境和生产环境配置
以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...
随机推荐
- linux下Flask框架搭建简单网页
开始安装FLASK需要创建一个虚拟环境,虚拟环境可以不干扰正在使用的系统环境,避免影响,并且也不需要完全的root权限,更加安全可靠. 搭建环境 Python3.4 进入到microblog目录下创建 ...
- CSS使用小记
1. 省略显示 max-width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 固定宽度,nowra ...
- Servlet(九):web.xml文件和server.xml文件
Web.xml 文件使用总结:作用: 存储项目相关的配置信息,保护 Servlet.解耦一些数据对程序的依赖.使用位置: 每个 Web 项目中Tomcat 服务器中(在服务器目录 conf 目录中)区 ...
- 入门级----黑盒测试、白盒测试、手工测试、自动化测试、探索性测试、单元测试、性能测试、数据库性能、压力测试、安全性测试、SQL注入、缓冲区溢出、环境测试
黑盒测试 黑盒测试把产品软件当成是一个黑箱子,只有出口和入口,测试过程中只要知道往黑盒中输入什么东西,知道黑盒会出来什么结果就可以了,不需要了解黑箱子里面是如果做的. 即测试人员不用费神去理解软件里面 ...
- Mysql SQL执行错误:#1136
情况:在插入数据时可能会遇到这种情况: 原因: 插入时的数据个数与表中的字段个数不一致 解决方法: 检查表中的字段数与代码中所插入的数据字段数是否一致 例如:以下为Salary表中结构 虽然ActI ...
- (转)RBAC权限模型——项目实战
一.前言 权限一句话来理解就是对资源的控制,对web应用来说就是对url的控制,关于权限可以毫不客气的说几乎每个系统都会包含,只不过不同系统关于权限的应用复杂程序不一样而已,现在我们在用的权限模型基本 ...
- 搜素题 --java
Poj2531 首先把所有节点都放在一组,然后采用深度优先搜索的方法,对每一个节点都做判断是否应该移到另一组去,判断的依据是移过去和不移过去哪个得到的和值比较大(这里移去B组后的计算方法就是加上该点和 ...
- (60)Wangdao.com第十天_JavaScript 函数_作用域_闭包_IIFE_回调函数_eval
函数 实现特定功能的 n 条语句封装体. 1. 创建一个函数对象 var myFunc = new Function(); // typeof myFunc 将会打印 function ...
- React_基本原理_ajax
React 基本原理 初始化显示界面 创建虚拟DOM树 渲染到 原生 DOM 树 绘制界面显示 更新界面 setState() 更新状态机 重新创建虚拟 DOM 树 新/旧树比较差异 (执行一次 DO ...
- wamp 环境安装php_mongo 或 mongodb的扩展
特别注意:momgo 与mondb 是两个不同的扩展,不是同一个,这是一个坑 1.查看你的php版本,Compiler,Thread safety版本 2.下载地址 https://pecl.php. ...