entry顾名思义，就是打包的入口文件
module.exports = {
// 这个文件要做打包，从哪一个文件开始打包
entry: './src/index.js',
// 打包文件要放到哪里去，就配置在output这个对象里
output: {
// 打包好的文件名字
filename: 'bundle.js',
/**
* 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径
* __dirname指的是webpack.config.js所在的当前目录的这个路径
* 下面这个结合就是一个绝对路径
*/
path: path.resolve(__dirname, 'dist')
}
}
其中，
entry: './src/index.js'
等同于
entry: {
main: './src/index.js'
}
打包生成的文件，默认的名字叫main。打包生成的文件叫做bundle.js，如果我把这个自定义的打包好的名字去掉。那么打包生成的名字是什么，是main.js。所以这个名字，就是打包生成的名字。
现在我有一个需求，我希望，这个index.js，反复生成两次，第一个文件叫做main，第二个文件叫做sub。打包生成的名字还是叫bundle
module.exports = {
// 这个文件要做打包，从哪一个文件开始打包
entry: {
main: './src/index.js',
sub:'./src/index.js'
},
// 打包文件要放到哪里去，就配置在output这个对象里
output: {
// 打包好的文件名字
filename: 'bundle.js',
/**
* 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径
* __dirname指的是webpack.config.js所在的当前目录的这个路径
* 下面这个结合就是一个绝对路径
*/
path: path.resolve(__dirname, 'dist')
}
}
这个时候会报错，如图。
为什么呢？现在要用index.js生成两个文件，一个叫做main,一个叫sub，但是这两个文件最终都会被取名叫做bundle.js。这样取名就重复了。就冲突了，想要解决这个问题，我们把filename替换成一个占位符
output: {
// 打包好的文件名字
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
这个就是打包相应的名字
但是一般我们做好的项目都会上传到线上，域名下到文件，这个时候自动生成的index.html里面的js路径不是我想要到，我想要在路径前面加上域名
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="sub.js"></script>
这个自动插入的js想变成这样
<script type="text/javascript" src="http://cdn.com/main.js"></script>
<script type="text/javascript" src="http://cdn.com/sub.js"></script>
我们可以在webpack里面配置一个内容
output: {
publicPath: 'http://cdn.com.cn',
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
再去运行 npm run bundle。生成index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html template</title>
</head>
<body>
<div id='root'></div>
<script type="text/javascript" src="http://cdn.com.cn/main.js"></script>
<script type="text/javascript" src="http://cdn.com.cn/sub.js"></script>
</body>
</html>
会发现自动带了域名