webpack 配置文件 - SegmentFault 思否
source link: https://segmentfault.com/a/1190000040287399
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
命令了。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK