webpack中Entry与Output的基础配置
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>
会发现自动带了域名
