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 ...
随机推荐
- Delphi 快速读取TXT 指定行的数据
http://blog.csdn.net/MichaelJScofield/article/details/41869785 Delphi 快速读取TXT 指定行的数据 分类:Delphi个人挫品 ( ...
- Vagrant 手册之 Provisioning - File
原文地址 Provisioner 名字:"file" Vagrant 的 file provisioner 允许将文件或目录从主机上传到客户机. File provisioning ...
- cts-verifier测试流程
测试目的: cts的补充测试,可以理解为没法自动化的cts测试,这个是人工测试. 测试前提: 1.发货user版本 2.selinux:Enable 5.外网环境 设备需求: 2个待测设备:1个手机或 ...
- poj1065Wooden Sticks(dp——最长递减数列)
Description There is a pile of n wooden sticks. The length and weight of each stick are known in adv ...
- Convolutional Neural Networks(4):Feature map size,Padding and Stride
在CNN(1)中,我们用到下图来说明卷积之后feature maps尺寸和深度的变化.这一节中,我们讨论feature map size, padding and stride. 首先,在Layer1 ...
- HTML5-新增type属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML批量修改——正则表达式实践
目录 1.问题描述 2.初步研究 3.进一步研究 3.1提取2.*中的序号* 3.2提取标题 3.3选取全文 3.4替换 参考资料 1.问题描述 如下所示的一段HTML代码: ... <h2 a ...
- maven配置本地仓库、maven配置阿里中央仓库、eclipse配置maven
一.maven配置本地仓库路径 1.打开下载好的maven目录 (若没安装,可以看我写的安装步骤https://www.cnblogs.com/xjd-6/p/11344719.html) 2.进入c ...
- 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点
应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...
- 最小生成树(prim和Kruskal操!!SB题)
Arctic Network Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 30571 Accepted: 9220 D ...