# 第二章：webpack基础用法
## 1. entry
webpack 根据入口文件，找到入口文件对应的依赖，入口文件的依赖再找到它们的依赖，最终形成了依赖树(依赖不仅仅是 js， 还可以是 css, 图片，字体等资源)。
### 1.1 两种用法
单入口:
```javascript
module.exports = {
entry: './path/to/my/entry/file.js'
}
```
多入口:
```javascript
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
}
```
## 2. output
output 告诉 webpack 如何将编译后的文件输出到磁盘.
```javascript
module.exports = {
entry: {
app: './src/app.js',
search: './src/search,js'
},
output: {
filename: '[name].js', // 通过占位符来确保文件名称的唯一
path: __dirname + '/dist'
}
}
```
## 3. Loaders
webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其他文件类型(如 css, JSX 等)并把他们转化为有效的模块，并且可以添加到**依赖图**中。
本身是一个函数，接受源文件作为参数，返回转换的结果。
### 3.1 常用的 Loader
| 名称 | 描述 |
| ------------- | ------------------ |
| babel-loader | 转换 ES6, ES7 等新特性语法 |
| css-loader | 支持 css 文件的加载和解析 |
| less-loader | 将 less 文件转换为 css |
| ts-loader | 将 ts 转换为 js |
| file-loader | 将图片，字体进行打包 |
| raw-loader | 将文件以字符串的形式导入(文件内联) |
| thread-loader | 多进程打包 js 和 css |
### 3.2 用法
```javascript
module.exports = {
entry: {
app: './src/index.js',
hello: './src/hello.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js'
},
mode: 'production',
module: {
rules: [
test: /\.txt$/, // test 指定匹配规则
use: 'raw-loader' // use 指定使用的 loader 名称
]
}
}
```
## 4. Plugins
插件用于 bundle 文件的优化，资源管理，和环境变量的注入，等 Loaders 不能工作的领域。
作用于整个构建过程。
### 4.1 常用的 Plugins
| 名称 | 描述 |
| ------------------------ | ------------------------------- |
| CommonChunkPlugin | (多页面应用时) 将chunks 相同的模块代码提取成公共js |
| CleanWebpackPlugin | 清理构建目录 |
| ExtractTextWebpackPlugin | 将 css 从 bundle 文件中抽取成一个独立的 css |
| CopyWebpackPlugin | 将文件或文件夹拷贝到构建的输出目录 |
| HtmlWebpackPlugin | 创建 html 文件去承载输出的 bundle |
| UglifyjsWebpackPlugin | 压缩 JS |
| ZipWebpackPlugin | 将打包输出的资源生成一个 zip 包 |
### 4.2 plugins 的使用
```javascript
module.exports = {
entry: {
app: './src/index.js',
hello: './src/hello.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js'
},
mode: 'production',
module: {
rules: [
test: /\.txt$/,
use: 'raw-loader'
]
},
plugins: [
new HtmlWebpackPlugin({ // 插件
template: './src/index.html'
})
]
}
```
## 5. webpack 中的 mode
Mode 用于指定当前的构建环境: production, development 还是 none。
设置 mode 可以使用 webpack 内置的一些函数，如代码是否压缩等，默认值为 production。
### 5.1 mode 的内置函数功能
| 选项 | 描述 |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| development | 设置 process.env.NODE\_ENV 为 development，开启 NamedChunksPlugin 和 NamedModulesPlugin **(用于代码热更新，可以知道热更新时是哪个模块更新了)** |
| production | 设置 process.env.NODE\_ENV 为 production, 开启 FlagDependencyUsagePlugin，FlagIncludeChunksPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin |
| none | 不开启任何优化选项 |
## 6. 转换 ES6 和 React JSX
### 6.1 转换 ES6
假设有以下的代码:
```javascript
// 输入
const hello = () => {
console.log('hello');
}
// 打包输出
const hello = () => {
console.log('hello');
}
```
webpack 正常情况下，打包的结果和源代码一致。但是箭头函数在一些低版本的浏览器中并不能执行，对于低版本浏览器，我们需要将 ES6 语法转换为 ES5 的语法。
于是我们添加上 babel-loader，而 babel-loader 依赖于 babel, 同时使用 .babelrc 作为配置文件.
```
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/, // 针对 .js 文件使用 babel-loader
use: 'babel-loader'
}
]
},
plugins: [
]
}
```
设置 .babelrc:
```
{
"presets": [
"@babel/preset-env" // 转换 es6 需要这一项
],
"plugins": [
"@babel/proposal-class-properties"
]
}
// 可以这么理解 plugins 和 presets, 即 plugins 对应一个功能，一个 presets 是一系列 plugins 的集合
```
安装依赖: `npm i @babel/core @babel/preset-env babel-loader -D`, (暂时可以先不用到 @babel/proposal-class-properties)
之后，再次进行打包:
```javascript
// 输入
const hello = () => {
console.log('hello');
}
// 打包输出
var hello = function hello() {
console.log('hello');
};
```
于是，就能兼容低版本的浏览器了。
### 6.2 转换 JSX
先安装 react 和 react-dom 以及转换 react 要用到的 `@babel/preset-react`:
`npm i react react-dom @babel/preset-react -D`
在 `.babelrc` 中添加 `@babel/preset-react`
```javascript
{
"presets": [
"@babel/preset-env",
"@babel/preset-react" // 新增对于 react 的解析
]
}
```
新建 index.js 文件:
```javascript
import React from 'react'
import ReactDOM from 'react-dom';
function App() {
return hello world
}
ReactDOM.render(
,
document.querySelector('#root')
)
```
打包该文件，引入到 html 文件中即可查看到效果。
## 7. 转换 CSS, Less
### 7.1 解析 CSS
css-loader 用于加载 .css 文件，并且转化为 commonjs 对象，即当在文件中 `import './xxx.css'` 的时候，css-loader 会将 css 文件转换为 commonjs 对象
`style-loader` 将样式通过 标签插入到 head 中
先安装依赖:
`npm i style-loader css-loader -D`
配置一下 webpack.config.js
```javascript
module: {
...
rules: [
{
test: /\.css$/, // 新增对于 css 文件的解析，
use: [ // use 支持链式调用，先执行 css-loader, 再执行 style-loader
'style-loader',
'css-loader'
]
}
]
},
```
### 7.2 解析 Less
安装依赖:
`npm i less less-loader -D`
因此 less-loader 本身基于 less， 因此 less 也需要安装。
接着，webpack.config.js 新增对于 .less 文件的支持:
```javascript
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/, // 新增该项
use: [
'style-loader',
'css-loader',
'less-loader' // .less 文件先经过 less-loader 处理，再通过 css, style 等 loader 处理
]
}
]
},
```
## 8. 解析图片和字体
### 8.1 解析图片
file-loader 可以用来处理文件。
安装依赖: `npm i file-loader -D`
配置 webpack.config.js：
```javascript
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif)$/, // 针对这些图片文件使用 file-loader
use: 'file-loader'
}
]
}
```
使用
```javascript
import React from 'react'
import ReactDOM from 'react-dom';
import logo from './images/logo.jpg'; // 直接引入图片
import './index.less'
// 经过 file-loader 之后， logo.jpg 被编译为 [hash].jpg，存放在 dist 目录, hash 为计算所得的值
// 此时 logo 即为编译后的图片地址: [hash].jpg
console.log(logo);
function App() {
return
}
ReactDOM.render(
,
document.querySelector('#root')
)
```
### 8.2 解析字体
file-loader 也可以用来解析字体
[字体下载](https://github.com/junmer/source-han-serif-ttf/blob/master/SubsetTTF/CN/SourceHanSerifCN-Bold.ttf)
配置 webpack.config.js
```javascript
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 针对字体文件使用 file-loader
use: 'file-loader'
}
```
在 css 中引入字体，即可查看到效果
```
// ./images/SourceHanSerifCN-Bold.ttf 为字体存放的位置
@font-face {
font-family: 'SourceHanSerifCN-Bold';
src: url('./images/SourceHanSerifCN-Bold.ttf') format('truetype');
}
body {
.hello {
color: blue;
font-family: 'SourceHanSerifCN-Bold';
}
}
```
### 8.3 使用 url-loader 解析图片和字体
url-loader 和 file-loader 都可以处理图片和字体, 实质上 url-loader 是**基于 file-loader**的，url-loader 相对 file-loader 而言，可以设置**较小的资源**自动进行 base-64 的转换。
安装依赖: `npm i url-loader -D`
配置 webpack.config.js
```javascript
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10240 // 10k, 如果图片小于 10k，那么就会被转为 base64
}
}]
},
```
测试图片可随意在 Google 搜索 **icon png**， 找到小于 10k 的图片
```javascript
import React from 'react'
import ReactDOM from 'react-dom';
import logo from './images/logo.jpg';
import './index.less'
// 如果 logo.jpg 大于 10k， 会在 dist 目录生成一个 [hash].jpg 的文件， logo 变量为 [hash].jpg 的 url 路径
// 而如果 logo.jpg 小于 10k 时，则不会在 dist 目录生成文件，同时 logo 为 base64 的内容
console.log(logo);
function App() {
return
hello
