[TOC]
# 版本 webpack v4.27.1
[webpack官網](https://www.webpackjs.com/guides/asset-management/#%E5%AE%89%E8%A3%85)
## 1. 復制一個 .gitignore文件 到新建的目錄
> vue 配置里的文件
## 2. 輸入webpack的配置
~~~
npm init -y
npm i webpack webpack-cli -g
npm i webpack webpack-cli --save-dev
~~~
## 3. 建立基本文件
> src/index.css , index.js
> 在 webpack.config.js 里建立新內容
```
module.exports = {
/* 模式 */
mode: "development",
/* 人口文件 */
entry: "./src/index.js",
/* 出口文件 */
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
}
```
## 4. 處理css
裝依賴
```
npm i style-loader css-loader --save-dev
```
```
//webpack.config.js
module.exports ={
module:{
rules:[
{
test:/\.css$/,
user:['style-loader','css-loader']
}
]
}
}
```
## 5.處理圖片
```
npm i file-loader --save-dev
```
```
//webpack.config.js
module.exports ={
module:{
rules:[
{
test:/\.(png|svg|jpg|gif)$/,
user:['file-loader']
}
]
}
}
```
## 6 .插件plugin
```
npm install --save-dev html-webpack-plugin
```
```
//webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
module.exports ={
plugins:[
new cleanWebpackPlugin(['dist']),
new htmlWebpackPlugin({
title:"輸出管理"
})
]
}
```
## 清除dist目錄的插件
```
npm install clean-webpack-plugin --save-dev
```
