目录
一、live-server服务器介绍：
以前我们是用live-server这个服务器，那这里就给大家介绍一下：ive-server是一款简单的开发用的Http服务器。特点就是在你静态文件进行修改后，有自动加载的功能。
使用它主要有两个原因：
1、对Ajax的操作必须要有服务器的支持，比如用javascript去获取内容。
2、浏览器的自动更新，可以加快开发。你不需要安装任何浏览器插件或手动添加代码片段到您的网页代码里。
二、webpack配置多路口文件
当我们需要时webpack 是允许我们有多个输出文件的。也就是说，我们可以在html文件中引入2个js文件或者其他的文件。
我们来做个多入口文件的例子：
- 建立indx.html文件，引入bundle1.js和bundle2.js，这两个文件就是我们要打包的两个js文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpack example02</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript" src="./bundle1.js"></script>
<script type="text/javascript" src="./bundle2.js"></script>
</body>
</html>
- 建立两个JavaScript文件，分别是main1.js 和main2.js。然后在里边输出 Hello world 和 Hello webpack
main1.js文件：
document.write("<h1>Hello World!</h1>");main2.js文件：
document.write("<h2>Hello Webpack!</h2>");
- 建立webpack.config.js配置文件（注意entry和output之间有逗号，否则生成不了打包文件）
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
};
- 使用webpack命令进行打包，生成'bundle1.js'和'bundle2.js'文件
- 安装live-server，只要用npm install就可以安装了
npm install live-server -g
- 启动live-server预览
live-server
- 效果图
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
