biji/前端/webpack.md

# webpack
> 这是个人学习webpack笔记
## 概念
webpack是一个静态文件打包器
他会递归生成一个依赖树 然后生产呢个一个或多个包(bundel)
### 需要了解四个概念
1. 入口
2. 输出
3. loader 加载
4. 插件

### 入口
入口是指webpack应在那个文件开始处理依赖图
然后输出到一个叫bundles(包)文件中
可以使用entry属性 定义入口
```
module.exports = {
  entry: './path/to/my/entry/file.js'
};
```

### 出口
出口是告诉webpack将所打包成功的 bundel输出到哪个位置 以及如何命名
默认为./dist
可以使用output定义
```
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
```
path 输出目录
filename 输出文件名

### loader 
loder 可以让webpack处理javascript文件之外的
默认webpack只可以处理javascript文件
loader将其他文件转化为webpack可以处理的有效模块文件
webpack loader配置有两个目标
- test属性 用来标识要处理的某个文件或某些文件
- use属性 表示转换时 用到那一个koader
```
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;
```
定义时需要写道module.rules中 

### 插件
loader可以作为转换某种类型的模块
插件可以做各式各样的工作？
引用插件 先require()
然后加入到plugis数组中
```
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;
```
### 模式
通过选择 ``` develompment ``` 与 ``` production ```之中的一个
```
module.exports = {
  mode: 'production'
};
```

## 入口起点
> 在webpack中有多种定义entry的方法
### 单个入口起点
config
```
const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;
```