在上面一节中,我们把最基本的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

                

ssl

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命令传参

配置选项

参数说明输入类型默认值
–config配置文件的路径stringwebpack.config.js 或 webpackfile.js
–config-register, -r在 webpack 配置文件加载前先预加载一个或多个模块array 
–config-name要使用的配置名称string 
–env当配置文件是一个函数时,会将环境变量传给这个函数  
–mode用到的模式,”development” 或 “production” 之中的一个string 

输出配置

参数说明输入类型默认值
–output-chunk-filename输出的附带 chunk 的文件名string含有 [id] 的文件名,而不是 [name] 或者 [id] 作为前缀
–output-filename打包文件的文件名string[name].js
–output-jsonp-function加载 chunk 时使用的 JSONP 函数名stringwebpackJsonp
–output-library以库的形式导出入口文件string 
–output-library-target以库的形式导出入口文件时,输出的类型stringvar
–output-path输出的路径(在公共路径的基础上)string当前目录
–output-pathinfo加入一些依赖信息的注解booleanfalse
–output-public-pathThe 输出文件时使用的公共路径string/
–output-source-map-filename生成的 SourceMap 的文件名string[name].map or [outputFilename].map
–build-delimiter在构建输出之后,显示的自定义文本string默认字符串是 null。你可以提供一个 === Build done === 这样的字符串

Debug 配置

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

参数说明输入类型默认值
–debug把 loader 设置为 debug 模式booleanfalse
–devtool为打包好的资源定义 [source map 的类型]string-
–progress打印出编译进度的百分比值booleanfalse
–display-error-details展示错误细节booleanfalse

模块配置

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

参数说明用法
–module-bind为 loader 绑定一个文件扩展–module-bind js=babel-loader
–module-bind-post为 post loader 绑定一个文件扩展 
–module-bind-pre为 pre loader 绑定一个文件扩展 

Watch选项

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

参数说明
–watch, -w观察文件系统的变化
–watch-aggregate-timeout指定一个毫秒数,在这个时间内,文件若发送了多次变化,会被合并
–watch-poll轮询观察文件变化的时间间隔(同时会打开轮询机制)
–watch-stdin, –stdin当 stdin 关闭时,退出进程

性能优化配置

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

参数说明使用的插件
–optimize-max-chunks限制 chunk 的数量LimitChunkCountPlugin
–optimize-min-chunk-size限制 chunk 的最小体积MinChunkSizePlugin
–optimize-minimize压缩混淆 javascript,并且把 loader 设置为 minimizingTerserPlugin & LoaderOptionsPlugin

Resolve配置

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

参数说明示例
–resolve-alias指定模块的别名–resolve-alias jquery-plugin=jquery.plugin
–resolve-extensions指定需要被处理的文件的扩展名–resolve-extensions .es6 .js .ts
–resolve-loader-alias最小化 JavaScript,并且将 loader 切换到最简 

统计数据配置

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

参数说明type
–color, –colors强制在控制台开启颜色 [默认:仅对 TTY 输出启用]boolean
–no-color, –no-colors强制在控制台关闭颜色boolean
–display选择显示预设(verbose - 繁琐, detailed - 细节, normal - 正常, minimal - 最小, errors-only - 仅错误, none - 无; 从 webpack 3.0.0 开始)string
–display-cached在输出中显示缓存的模块boolean
–display-cached-assets在输出中显示缓存的 assetsboolean
–display-chunks在输出中显示 chunksboolean
–display-depth显示从入口起点到每个模块的距离boolean
–display-entrypoints在输出中显示入口文件boolean
–display-error-details显示详细的错误信息boolean
–display-exclude在输出中显示被排除的文件boolean
–display-max-modules–display-max-modulesnumber
–display-modules在输出中显示所有模块,包括被排除的模块boolean
–display-optimization-bailout作用域提升回退触发器(Scope hoisting fallback trigger)(从 webpack 3.0.0 开始)boolean
–display-origins在输出中显示最初的 chunkboolean
–display-provided-exports显示有关从模块导出的信息boolean
–display-reasons显示模块包含在输出中的原因boolean
–display-used-exports显示模块中被使用的接口(Tree Shaking)boolean
–hide-modules隐藏关于模块的信息boolean
–sort-assets-by对 assets 列表以某种属性排序string
–sort-chunks-by对 chunks 列表以某种属性排序string
–sort-modules-by对模块列表以某种属性排序string
–verbose显示更多信息boolean

高级配置

参数说明用法
–bail一旦发生错误,立即终止 
–cache开启缓存 [watch 时会默认打开]–cache=false
–define定义 bundle 中的任意自由变量,查看 shimming–define process.env.NODE_ENV=”‘development’”
–hot开启模块热替换–hot=true
–labeled-modules开启模块标签 [使用 LabeledModulesPlugin] 
–plugin加载某个插件 
–prefetch预加载某个文件–prefetch=./files.js
–provide在所有模块中将这些模块提供为自由变量,查看 shimming–provide jQuery=jquery
–records-input-path记录文件的路径(读取) 
–records-output-path记录文件的路径(写入) 
–records-path记录文件的路径 
–target目标的执行环境–target=’node’

Profiling

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

webpack --profile

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

与–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
⋮

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)