获取全套webpack 4.x教程，请访问瓦力博客

在上面一节中，我们把最基本的webpack环境搭建起来了，这一小节，小菜教大家写一个最基本的webpack配置。没有loader,module,resolve,server模块，只有entry,output模块。

文件结构

myProject 
|-src  
    |-index.js
|-dist 
|-node_modules 
|-package.json  
|-webpack.config.js
|-yarn

index.js

console.log("欢迎来到wali博客！");

1.手写webpack配置

webpack.config.js

const path = require('path');

module.exports = {
  mode:'development',
  entry:'./src/index.js',
  output:{
    path: path.resolve(__dirname,'dist')
  }

}

跑一下

npx webpack --colors

2.让打包更便捷

当打包完成后，在dist目录下会生成一个mian.js。我们最简单webpack打包就做完了。每次都允许npx webpack --colors命令太麻烦了。package.json文件中，添加下面代码

{
  "scripts":{
  "dev": "npx webpack --mode=development ----colors --profile",
  "dist": "npx webpack --mode=production"
  }
}

添加成功后，我们再次执行

yarn run dev

3.webpack命令传参

• webpack 命令行接口参数{:target="_blank"}

配置选项

输出配置

Debug 配置

以下这些配置可以帮助你在 Webpack 编译过程中更好地 debug

模块配置

这些配置可以用于绑定 Webpack 允许的模块。

Watch选项

这些配置可以用于观察依赖文件的变化，一旦有变化，则可以重新执行构建流程

性能优化配置

在生产环境的构建时，这些配置可以用于调整的一些性能相关的配置

Resolve配置

这些配置可以用于设置 webpack resolver 时使用的别名(alias)和扩展名(extension)

统计数据配置

以下选项用于配置 Webpack 在控制台输出的统计数据，以及这些数据的样式

高级配置

Profiling

–profile 选项捕获编译时每个步骤的时间信息，并且将这些信息包含在输出中

webpack --profile

⋮
[0] ./src/index.js 90 bytes {0} [built]
    factory:22ms building:16ms = 38ms

• factory: 收集模块元数据的时间（例如解析文件名）
• building: 构建模块的时间（例如加载器和解析
• dependencies: 时间来识别和连接模块的依赖项

与–progress配对， - profile可让您深入了解编译中的哪一步需要多长时间。这可以帮助您以更明智的方式优化构建。

webpack --progress --profile

30ms building modules
1ms sealing
1ms optimizing
0ms basic module optimization
1ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms module reviving
0ms module order optimization
1ms module id optimization
1ms chunk reviving
0ms chunk order optimization
1ms chunk id optimization
10ms hashing
0ms module assets processing
13ms chunk assets processing
1ms additional chunk assets processing
0ms recording
0ms additional asset processing
26ms chunk asset optimization
1ms asset optimization
6ms emitting
⋮