webpack入门总结

官网：https://www.webpackjs.com/

核心原理

• 一切皆模块
• 按需加载

概念

module

具有一定功能的模块。

bundle

打包后的文件。

chunk

打包过程分割的代码块。

关于webpack的理解

可以从以下几个方面来理解webpack:

1. 文件处理与编译
2. 开发环境
3. 打包优化
4. 框架配合

webpack核心概念

Entry

Webpack 会递归的探索出 入口文件中所依赖的模块，并按照顺序 利用 Loader 进行处理。

单入口

1.string

entry: "app.js";

多入口

1.Array<string>
数组中的每一项都会被打包，形成互不依赖的文件

entry: ["app.js","main.js"];

2.object

entry: {
    [entryChunkName]: string | Array<string>
}

对象中的每一个属性都会被打包，形成互不依赖的文件

entry: {
  index:['index.js','app.js'],
  vendor: 'vendor.js'
}

Output

即是你配置了多个入口文件，你也只能有一个输出点。

path

输出文件的目录。

绝对路径

filename

输出的文件名，它一般跟你entry配置相呼应。

单入口

• 自定义

filename: "[name].bundle.js"

多入口

• [name].js
• [id].js, 使用内部 chunk id
• [hash].js, 使用每次构建过程中，唯一的 hash 生成

在项目中任何一个文件改动后就会被重新创建，然后webpack计算新的hash值

• [chunkhash].js, 使用基于每个 chunk 内容的 hash

publicPath

静态资源服务器访问路径，以index.html的路径为基准。

静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

publicPath 应该以/结尾，同时其它 loader 或插件的配置不能以/开头

chunkFilename

配置了它，为非入口entry的模块命名，可以理解为需要被打包出来的文件命名。

以path路径为基准

chunkFilename - filename

异步模块: chunkFilename 
同步模块：filename

resolve

配置模块如何解析。

extensions：自动解析确定的扩展,省去你引入组件时写后缀的麻烦
alias：非常重要的一个配置，它可以配置一些短路径

module

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

module.rules - 编译规则

rules：也就是之前的loaders
test ： 正则表达式，匹配编译的文件
exclude：排除特定条件，如通常会写node_modules，即把某些目录/文件过滤掉
include：它正好与exclude相反