[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()]
}
~~~
