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>

会发现自动带了域名