[TOC]
[官方文檔](https://www.webpackjs.com)
# 0.配置前的準備
* 使用webpack必須安裝node.js環境;
## npm安裝太慢可以安裝cnpm,走淘寶的倉庫
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
# 1.webpack環境配置
先建一個 src / index.js 文件
```
npm init -y
npm i webpack webpack-cli -g
npm i webpack webpack-cli --save-dev
//打包 再建一個webpack.config.js
webpack
```
```
如果以上步驟都走了，還是沒有dist文件生成
重新走一遍
npm i webpack-cli -g
webpack
```
## plugins（插件）
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內置插件
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
};
```
# 2.html-webpack-plugin
## 2.1安裝
```
npm i html-webpack-plugin --save-dev
```
## 2.2引入
在webpack.config.js文件中
```
//webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
```
## 1.3 使用
```
//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');//++
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
//在plugins中使用++
plugins:[
new htmlWebpackPlugin({
title:"打包文件",
inject:"head"
})
]
};
```
# 3.clean-webpack-plugin
## 3.1安裝
```
npm i clean-webpack-plugin --save-dev
```
##3.2使用
```
//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
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'
})
]
};
```
# 4. style-loader，css-loader
```
npm i style-loader css-loader --save-dev
```
```
module: {
//允許在js中引入css文件
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}]
}
```
> 在入口的js中引入css
