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',
 //在生产环境中启用 source map,因为它们对 debug(调试源码) 和运行 benchmark tests(基准测试) 很有帮助
 //避免在生产中使用 inline-*** 和 eval-***,因为它们会增加 bundle 体积大小,并降低整体性能。 
 //与开发环境用的不一样
 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)-生产环境的更多相关文章

  1. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  2. VUE 利用webpack 给生产环境和发布环境配置不同的接口地址

    第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...

  3. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  4. Webpack配置区分开发环境和生产环境

    在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...

  5. vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用

    大家都知道webpack打包十分方便,但是在工作中,前端写好的项目需要后端进行部署,就需要有一个配置文件. 使用插件 :  GenerateAssetPlugin , 使用方法 : 1  在项目中安装 ...

  6. webpack开发与生产环境配置

    前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...

  7. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  8. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  9. webpack深入场景——开发环境和生产环境配置

    以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...

随机推荐

  1. cc.Component 的使用

    1.组件入口函数,常有的:onLoad,start,update //组件在加载的时候运行,并且场景的初始化工作已经完成 onLoad() { }, //组件在第一次update调用之前调用 star ...

  2. ssh报错 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    今天登陆远程主机的时候,出现如下的报错信息 ssh 10.0.0.1 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WAR ...

  3. spark DataFrame的创建几种方式和存储

    一. 从Spark2.0以上版本开始,Spark使用全新的SparkSession接口替代Spark1.6中的SQLContext及HiveContext接口来实现其对数据加载.转换.处理等功能.Sp ...

  4. Laravel日常使用总结

    字段当做键值key 集合的keyBy()方法详情:戳这里 创建模型类和数据库迁移文件 php artisan make:model Post -m 创建控制器和基础的方法 php artisan ma ...

  5. jsonwebtoken收藏博客地址

    这个东西也不是很懂,但是查了一下资料,大概知道是什么了,具体要怎么嵌套到具体自己需要实现的功能里面,这个跨度还是有点大, 先把博客地址给收藏了. 这里是Java版示例 简书参考 js示例 github ...

  6. SQL中DATENAME函数的用法

    在SQL数据库中有多种函数,下面就将为您介绍其中的DATENAME函数的用法,供您参考,希望对您学习SQL中函数的用法能有所帮助. 在SQL数据库中,DATENAME函数的作用是是从日期中提取指定部分 ...

  7. 16重新安装HA0.63

    2018-02-24 14:17:46 https://home-assistant.io/docs/installation/raspberry-pi/首先安装2017-11-29-raspbian ...

  8. 2017-2018 ACM-ICPC, NEERC, Moscow Subregional Contest

    A. Advertising Strategy 最优策略一定是第一天用$y$元,最后一天再用$x-y$元补满. 枚举所有可能的$y$,然后模拟即可,天数为$O(\log n)$级别. 时间复杂度$O( ...

  9. LOJ #6192. 「美团 CodeM 复赛」城市网络 (树上倍增)

    #6192. 「美团 CodeM 复赛」城市网络 内存限制:64 MiB 时间限制:500 ms 标准输入输出   题目描述 有一个树状的城市网络(即 nnn 个城市由 n−1n-1n−1 条道路连接 ...

  10. linux(debian) arm-linux-g++ v4.5.1交叉编译 embedded arm 版本的QtWebkit (browser) 使用qt 4.8.6 版本 以及x64上编译qt

    最近需要做一个项目 在arm 架构的linux下 没有桌面环境的情况下拉起 有界面的浏览器使用. 考虑用qt 的界面和 qtwebikt 的库去实现这一系列操作. 本文参考: Qt移植到ARM Lin ...