webpack 配置文件
像上一节中,我们每次在打包文件时都需要手动输入源文件名和输出文件名,这样会比较麻烦,要解决这个问题,我们可以使用配置文件来进行管理。
本节我们来学习 webpack
的配置文件 webpack.config.js
,由于 webpack
配置文件是导出一个对象的 JavaScript 文件,因此很少有 webpack
的配置看起来是完全相同的。
因为 webpack
配置是一个标准的 Node.js 模块,所以在配置文件中可以执行以下操作:
- 通过
require()
导入其他文件。 - 通过
require()
使用npm
的工具函数。 - 使用
JavaScript
控制流表达式,例如?:
操作符。 - 对常用值使用常量或变量。
- 编写和执行函数以生成配置的一部分。
创建webpack.config.js配置文件
webpack
在执行打包命令的时候,除了在命令行传入参数,例如 webpack 入口文件路径 输出文件路径
。还可以通过指定的配置文件来执行。默认情况下,会搜索项目中的 webpack.config.js
文件,这个文件是一个 Node.js
模块,返回一个 json
格式的配置信息对象,或者通过 --config
选项来指定配置文件。
通常 webpack.config.js
文件放在项目的根目录下,例如我们在 xkd_webpack
项目根目录下创建一个 webpack.config.js
文件,在这个文件中来配置处理入口文件和输出文件。
示例:
module.exports = {entry:'./index.js',output:{path:__dirname,filename:'./bundle.js'},mode: 'development'
}
这样我们只需要在命令行中执行 webpack
命令,就会开始自动打包文件啦。
执行 webpack
命令后,出现如下图所示内容说明文件打包成功:
可以看到,执行 webpack
命令的运行结果和上一节的中 webpack index.js -o bundle.js
命令的运行执行结果是一样的,但是很显然,执行 webpack
命令要方便很多。
这样还有一个问题,就是每次我们修改了源文件之后都需要重新执行 webpack
命令,所以我们可以通过在配置文件中添加 watch
属性来自动检测文件变化并重新打包。
示例:
将配置文件修改为如下内容,这样我们每次修改源文件后都会自动重新打包:
module.exports = {entry:'./index.js',output:{path:__dirname,filename:'./bundle.js'},mode: 'development',watch: true
}
下面是几个基本的 webpack
命令:
webpack
:最基本的启动webpack
方法。webpack -w
:提供watch
方法,实时进行打包更新。webpack -p
:对打包后的文件进行压缩,提供production
。webpack -d
: 提供source map
,方便调试。
模式
webpack4.0
中可以设置 mode
,通过设置 mode
的值,可以轻松设置打包环境,可取值有:
选项 | 描述 |
---|---|
development
|
开发模式,通过 DefinePlugin 插件将 process.env.NODE_ENV 的值设为 development 。启用 NamedChunksPlugin 和 NamedModulesPlugin
|
production
|
生产模式,默认值。通过 DefinePlugin 插件将 process.env.NODE_ENV 的值设为 production 。启用 FlagDependencyUsagePlugin 、 FlagIncludedChunksPlugin 、ModuleConcatenationPlugin 、 NoEmitOnErrorsPlugin 、 OccurrenceOrderPlugin 、 SideEffectsFlagPlugin 和 TerserPlugin
|
none
|
通过 DefinePlugin 插件将 process.env.NODE_ENV 的值设为 node 。使用默认的优化项
|
如果将值设置为 development
,将获得最好的开发阶段体验。这得益于 webpack
针对开发模式提供的特性:
- 浏览器调试工具。
- 注释、开发阶段的详细错误日志和提示。
- 快速和优化的增量构建机制。
如果将值设置为 production
,webpack
将专注项目的部署:
- 开启所有的优化代码。
- 更小的
bundle
大小。 - 去除掉只在开发阶段运行的代码。
Scope hoisting
和Tree-shaking
。
在配置文件中设置mode
:
module.exports = {mode: 'development'
};
或者可以将其作为 CLI 参数传递:
webpack --mode=development
自定义打包命令
除了直接输入 webpack
命令来执行文件打包,我们还可以自定义打包命令。例如我们可以使用 npm
来引导任务执行,对其进行配置后可以使用简单的 npm run
命令来代替这些繁琐的命令。
其实也很简单,只需要在 package.json
文件中对 npm
的脚本部分进行一些修改,例如:
"scripts": {"build": "webpack --config webpack.config.js"
}
这样通过 --config
参数加 webpack.config.js
来指定要执行的文件,此时要进行文件打包,就只需要执行 npm run build
命令即可。其中 build
是我们自己定义的,除了 build
我们也可以使用其他的名字,例如使用的是 test
,那执行的就是 npm run test
命令了。
webpack 配置文件相关推荐
- 为什么我们要做三份 Webpack 配置文件
时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server).模块热更新(hot module re ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- WebPack配置文件抽离存放
WebPack配置文件的分离 文章目录 WebPack配置文件的分离 简述 一.安装插件&配置 二.抽离存放 1.分离配置文件 2.merge配置文件之间接合 三.打包 总结 简述 对配置文件 ...
- webpack配置文件:webpack.config.js(一)
1.webpack的配置文件webpack.config.js //const HtmlWebpackPlugin = require('html-webpack-plugin'); module.e ...
- webpack 配置文件.conf.js 浅理解
// 引入nodejs路径模块 var path = require('path') // 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和v ...
- 我的webpack配置文件
先把配置文件拷贝出来 var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = req ...
- webpack配置(webpack配置文件)
配置个5000元可以配置什么电脑 C 1TB 7200转 32MB(HDS72 1 ¥ 350 显卡 影驰 GT240中将版 1 ¥ 549 光驱 华硕 DRW-1814BLT 1 ¥ 115 LCD ...
- 前端学习(2158):webpack配置文件的分离
最新文章
- android汽车之家顶部滑动菜单,Android自定义控件之仿汽车之家下拉刷新
- 设计模式-行为-Iterator(迭代器)模式
- 【机器学习基础】数学推导+纯Python实现机器学习算法26:随机森林
- ITK:删除一个未连接到其边界的二进制图像中的孔
- 廖雪峰讲python高阶函数求导公式_一文读懂Python 高阶函数
- centos mysql 主从_CentOS 搭建 MySql 主从备份
- 超详解读:垃圾回收机制 | 原力计划
- 自考那些事儿(四):软件开发工具(理论篇)
- OPPO Find X,一款(可能)被全面屏“耽搁”了的AI手机
- React+Webpack+Antd+Babel 兼容低版本浏览器(上)
- linux下expect环境安装以及简单脚本测试
- OA升级及二次开发方案
- mongoDB占内存超大的问题-100MB数据,内存吃到22GB?
- 给软件工程师的自学建议
- android 单双层桌面切换
- C语言基础——统计由键盘输入的一行字符中数字、字母与其他的个数
- 推荐几个浪尖收藏的大数据学习平台
- CA6140机床后托架加工工艺及夹具设计(论文+CAD图纸+开题报告+任务书+工艺卡+外文翻译)
- 前端工程师简历怎么写?
- 【四分之四拍】四分之四拍每拍实际占多长时间?【用最理科的方式解释音乐里的这些玩意,不对之处欢迎指正】