关于webpack:webpack-配置文件

8次阅读

共计 2271 个字符，预计需要花费 6 分钟才能阅读完成。

像上一节中，咱们每次在打包文件时都须要手动输出源文件名和输入文件名，这样会比拟麻烦，要解决这个问题，咱们能够应用配置文件来进行治理。

本节咱们来学习 webpack 的配置文件 webpack.config.js，因为 webpack 配置文件是导出一个对象的 JavaScript 文件，因而很少有 webpack 的配置看起来是完全相同的。

因为 webpack 配置是一个规范的 Node.js 模块，所以在配置文件中能够执行以下操作：

通过 require() 导入其余文件。
通过 require() 应用 npm 的工具函数。
应用 JavaScript 控制流表达式，例如 ?: 操作符。
对罕用值应用常量或变量。
编写和执行函数以生成配置的一部分。

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 命令了。

正文完