[toc]
# 配置文件
## 文件名
使用 webpack 之前需要先创建一个配置文件。
所在位置：`根目录`
配置文件名： `webpack.config.js`
## 配置文件结构
配置文件中需要导出配置对象：
~~~json
module.exports = {
// 配置项
}
~~~
## 核心元素
配置文件中最核心的几个配置为：
~~~json
module.exports = {
mode: '模式', // 默认：production（生产模式）
entry: '起始文件所在位置', // 默认为 src/index.js
output: '打包之后输出的路径' , // 默认为 dist/main.js
module: { // 配置 loaders
rules: [
// loaders 的配置
]
},
plugins: [ // 配置插件
// 插件的配置
]
}
~~~
### 模式
mode：可选值：
production：生产环境，打包时开启很多优化打包的功能，比如压缩、Tree Shaking 等。
development：开发环境。
none：无任何插件加载。
### 入口路径
打包时的起始文件，这个文件中引入的文件都会一起打包。
### 输出路径
打包之后生成的文件所在的目录和文件名。
### loader
JavaScript 在使用 import 加载模块时，默认只能加载 JS 文件，通过 Loader 就可以使 JS 加载其它类型的文件。
常用的 loader：
| 不同内容 | loader处理器 |
| --- | --- |
| css | style-loader 和 css-loader |
| less | less-loader 和 less(less是less-loader的内部依赖) |
| 图片 | url-loader 和 file-loader |
| ttf | url-loader |
| ES6/ES7 | babel-loader |
比如，要引入 css 文件
安装 loader
~~~sh
npm i -D style-loader css-loader
~~~
配置文件
~~~json
const { resolve } = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: resolve(__dirname, './dist'),
filename: 'index\_bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
~~~
### 插件
插件可以在打包的过程中执行一些额外的功能。
比如，`html-webpack-plugin` 插件是用来自动生成一个 html 页面的。
安装
~~~sh
npm i -D html-webpak-plugin
~~~
配置文件
~~~json
const { resolve } = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: resolve(__dirname, './dist'),
filename: 'index\_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
~~~
