[TOC]
## 1.配置前的准备//将仓库改为淘宝
* 使用webpack必须安装node.js环境;
### npm安装太慢可以安装cnpm,走淘宝的仓库
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
## 2.webpack环境配置
```
npm init -y
npm i webpack webpack-cli -g
//走完这俩步如图 出现`webpack.json`文件
```
```
npm i webpack webpack-cli --save-dev
//运行完成出现如下文件
```
* 建一个 `src / index.js `文件和 `webpack.config.js `文件
* 文件内容
```
//index.js
var a = 10;
console.log(10);
```
[webpack官网](https://www.webpackjs.com/)
> webpack.config.js 直接复制官网
```
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
```
* 控制台输入`webpack` 出现如下图的文件及目录 `dist/bundle.js`
## 3.html-webpack-plugin
### 3.1安装
```
npm i html-webpack-plugin --save-dev
```
### 3.2引入
在webpack.config.js文件中
```
//webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
```
### 3.3 使用
```
//webpack.config.js
//在plugins中使用++
plugins:[
new htmlWebpackPlugin({
title:"打包文件",
inject:"head"
})
]
};
```
* webpack 出现 `dist/index.html`
## 4. style-loader，css-loader
### 4.1 安装
```
npm i style-loader css-loader --save-dev
```
### 4.2 在入口的js中引入css
### 4.3 使用
```
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
```
## 5.clean-webpack-plugin
## 5.1安装
```
npm i clean-webpack-plugin --save-dev
```
### 5.2引入
```
//webpack.config.js
const cleanWebpackPlugin = require('clean-webpack-plugin');
```
### 5.3 为了不重名 html 需要改成随机的
#### 1.删掉dist
#### 2.建一个 index.html
#### 3. 修改webpack.config.js
```
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[hash].bundle.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title:"打包文件",
inject:"head",
template:"index.html",
filename:'[hash]-index.html',
date:new Date(),
minify:{
removeComments:true,
collapseInlineTagWhitespace:te=true,
collapseWhitespace:true
}
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
mode: 'production'
};
```
#### 在控制台输入`webpack` 打包
> 引入const CleanWebpackPlugin = require('clean-webpack-plugin') //删除多余的文件
* 生成文件夹 `dist` 及其内容文件
