一、html-webpack-plugin
作用：
- 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
- 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
原理：将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
1.1 安装插件
代码语言：javascript复制npm install --save-dev html-webpack-plugin
npm run build 之后，就会生成dist文件，但是这个文件中有index.html。因为src文件中用到了 这个，打包后并没有。
所有需要配置模板 解决了打包之后，还需手动添加index.html文件的问题
1.2 配置webpack.config.js文件
代码语言：javascript复制const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
entry:path.join(__dirname,'./src/index.js'), // 入口
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules:[
{
test:/.(png|jpe?g|gif)$/i,
use:[
{
loader:'url-loader',
options:{
name:'[name].[ext]',
outputPath:'imgs/',
limit:20480
}
}
]
},
{
test:/.scss$/i,
use:[
"style-loader",
// 对css-loader进行配置
{
loader:'css-loader',
options: {
importLoaders:2
}
},
"postcss-loader",
"sass-loader"
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html' // 源模板文件
})
]
};
1.3 在src文件新建index.html文件
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
二、clean-webpack-plugin
作用：在每次构建前清理 /dist 文件夹测试过程:
代码语言：javascript复制output:{
filename:'test.js',
}
// 这里将bound.js改成test.js,npm run build之后，dist文件会出现test.js和bound.js,index.js会引入最先的test.js
存在问题：bound.js不应该存在。期望效果：bound.js 不存在，每次打包输出最新的文件，html也是引用最新的文件名
1.1 安装插件
代码语言：javascript复制npm install --save-dev clean-webpack-plugin
1.2 配置webpack.config.js文件
代码语言：javascript复制const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new CleanWebpackPlugin()
]
结果：clean-webpack-plugin帮我们实现了打包之前清空dist目录，然后根据output，产出最新的文件。
三、entry
3.1 完整写法
代码语言：javascript复制entry: {
main:'./src/index.js' // 完整写法
},
output: {
path: path.resolve(__dirname, './dist'), // 输出文件都放到 dist 目录下
}
如果没有filename，打包后，会生成dist/main.js。为什么是main.js 是因为entry。说明如果output不设置filename的话，打包的时候，会拿entry.main的key值当做filename。
3.2 两个入口
代码语言：javascript复制entry: {
main:'./src/index.js', // 完整写法
sub:'./src/index.js'
}
// 打包之后会生成main.js和sub.js 两个文件
// 如果打包输出的文件需要和入口文件相对应，可以如下配置
output: {
filename:'[name].js',
path: path.resolve(__dirname, './dist'),
}
3.3 简写
代码语言：javascript复制entry:path.join(__dirname,'./src/index.js'), // 这是简写
四、配置main.js的CDN网址
如果打包之后的引入的main.js是CDN网址的话，需要配置如下信息：
代码语言：javascript复制output: {
publicPath:'http://cdn.com.cn',
filename:'[name].js',
path: path.resolve(__dirname, './dist')
}
打包之后，dist/index文件显示如下：
代码语言：javascript复制<script src="http://cdn.com.cn/main.js"></script><script src="http://cdn.com.cn/sub.js"></script>
本示例提供完整代码：链接: https://pan.baidu.com/s/1ZnQ2ykAlWivhUB1Xn_ftZw 提取码: 75uy
