webpack使用的补充
1、分离生产环境和开发环境的wepack.config.js
我们可以将生产环境和开发环境中的配置分离为两个不同的文件,并且还维护一个共同的配置文件 common,可以通过 webpack.merge 包来将开发配置文件或者生产配置文件与共同配置文件合并。
npm install --save-dev webpack-merge
具体实现参考:https://www.webpackjs.com/guides/production/
2、webpack中的process.env.NODE_ENV
在node中,有全局变量 process 表示的是当前的node进程。process.env 包含着关于系统环境的信息。但是 process.env 中并不存在NODE_ENV这个东西。NODE_ENV 是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。
2.1、生产环境和开发环境的配置(mode)
在配置文件中直接配置mode选项将告知 webpack 使用相应模式的内置优化,mode选项有development、production、none。
development : 开发模式,打包的代码不会被压缩,开启代码调试,
production : 生产模式,则正好反之。
将 mode 设为development或者production,webpack会自动同时也设置process.env.NODE_ENV的值,我们可以在任何文件夹中直接拿到该值。但如果只设置 NODE_ENV
,则不会自动设置 mode
。
(请注意:mode选项是webpack4新增的,在4之前都是用DefinePlugin插件设置,webpack4把DefinePlugin删除了)
2.2、项目配置详解
在 webpack 中,一般都会在配置文件中配置 NODE_ENV 的值。
在使用 vue-cli 默认生成的 vue 项目中,NODE_ENV 配置情况如下:
//webpack.dev.conf.js 文件下,引入了 dev.env.js 文件
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}), //dev.env.js 文件中
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
//webpack.prod.conf.js 文件下,引入了 prod.env.js 文件 const env = require('../config/prod.env')
new webpack.DefinePlugin({
'process.env': env
}), //prod.env.js 文件中
module.exports = {
NODE_ENV: '"production"'
}
从上面可以知道,在开发环境下,配置文件将 NODE_ENV 配置成了 'development';在生产环境下,配置文件将 NODE_ENV 配置成了 'production'。
我们在运行项目时,会执行 npm run dev 或者 npm run build,这两个命令时使用了开发环境或者生产环境的配置文件来生成运行项目,由此也对应着配置了对应的 NODE_ENV 的值,我们也就能够在项目的任一文件中(配置文件不一定,因为要看配置了 NODE_ENV 的值的配置文件有没有生效了才行)获取到对应的 NODE_ENV 的值。
2.3、process.env.NODE_ENV
process 是 node 的全局变量,并且 process 有 env 这个属性,但是没有 NODE_ENV 这个属性。NODE_ENV 变量并不是 process.env 直接就有的,而是通过设置得到的,但是 NODE_ENV
变量通常约定用于定义环境类型。这个变量的作用是:我们可以通过判断这个变量区分开发环境或生产环境。
(1)可以通过webpack的内置插件 DefinePlugin 来设置全局变量值:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
设置完后在执行脚本上可以取到该值,比如:
// main.js
console.log(process.env.NODE_ENV); //production
但是在webpack的配置文件 webpack.config.js 中取不到该值。
(2)通过 cross-env 包设置
先下载 cross-env 包:
cnpm i cross-env -D
设置 package.json 文件:
"build": "cross-env NODE_ENV=test webpack --config webpack.config.js"
此时在配置文件中可以取到该值(process.env.NODE_ENV),但是在可执行脚本中取不到,需要配合DefinePlugin 插件使用
可参考:https://www.cnblogs.com/usebtf/p/9912413.html、https://www.cnblogs.com/tugenhua0707/p/9780621.html
3、指定文件名扩展(resolve.extensions)
通过指定 resolve 字段的extensions值可以指定自动解析的文件扩展名。
(webpack的旧版本 1.xx 必须在 extensions 字段值中传入一个空字符串, 2.xx 版本及以上则不用。请注意:好像一定要传入一个 '.js' 字符串,要不然会报错)
module.exports = {
resolve: {
extensions: ['.js','.css']
}
}
自动解析确定的扩展,默认值为:
extensions: [".js", ".json"]
能够使用户在引入模块时不带扩展,比如:
//引入 mian.js
import aaa from '../path/to/main';
使用此选项,会覆盖默认数组,这就意味着 webpack 将不再尝试使用默认扩展来解析模块,对于需要指定自动解析的文件扩展名必须得写入该数组中。
webpack使用的补充的更多相关文章
- vue安装和使用
首先这里记录的是基于安装node.js 的npm安装vue 如果你不是用的node与npm 那就不必往下看了 1.安装node.js这个不多说 百度有很多 2.安装webpack 全局安装we ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
- [转]webpack
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- 模块化管理工具兼打包工具 webpack
webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack入门指南(转载)
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack进阶之插件篇
一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...
随机推荐
- JS-立即执行函数表达式(IIFE)
javascript 函数调用 在 javascript 中,每一个函数在被调用的时候都会创建一个执行上下文,在该函数内部定义的变量和函数只能在该函数内部被使用,而正是因为这个上下文,使得我们在调用函 ...
- php面向对象三大特性
1.封装: 目的:使类更加安全 步骤:1.成员变量变成private(私有的)2.设置方法/调用方法3.在方法中增加限制 <?php class shao { private $aa;//必须是 ...
- SparkSQL架构
Spark SQL运行架构 Spark SQL由Core.Catalyst.Hive和Hive-Thriftserver组成 core:负责处理数据的输入/输出,从不同的数据源获取数据(如RDD.Pa ...
- php登陆ssh执行命令
<?php $connection=ssh2_connect('172.16.10.3',22);ssh2_auth_password($connection,$user,$pass);$cmd ...
- 【ABAP系列】SAP ABAP常用正则表达式大全
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP常用正则表达式大 ...
- Support Vector Machine(2):Lagrange Duality求解线性可分SVM的最佳边界
在上篇文章<Support Vector Machine(1):线性可分集的决策边界>中,我们最后得到,求SVM最佳Margin的问题,转化为了如下形式: 到这一步后,我个人又花了很长的时 ...
- [Codeforces 464E] The Classic Problem(可持久化线段树)
[Codeforces 464E] The Classic Problem(可持久化线段树) 题面 给出一个带权无向图,每条边的边权是\(2^{x_i}(x_i<10^5)\),求s到t的最短路 ...
- GnuTLS 3.3.3 remote memory corruption(CVE-2014-3466)
Buffer overflow in the read_server_hello function in lib/gnutls_handshake.c in GnuTLS before 3.1.25, ...
- Codeforces - 1194B - Yet Another Crosses Problem - 水题
https://codeforc.es/contest/1194/problem/B 好像也没什么思维,就是一个水题,不过蛮有趣的.意思是找缺黑色最少的行列十字.用O(n)的空间预处理掉一维,然后用O ...
- 图解git中的最常用命令
图解git中的最常用命令 Git命令参考手册(文本版) git init # 初始化本地git仓库(创 ...