webpack-dev-server会在本地启动一个静态资源服务器，还可以监控代码的改动，
当文件发生变更时，自动刷新浏览器。
1. 在工程根目录中，初始化并安装依赖
$ npm init
$ npm i -g webpack webpack-dev-server
$ npm i -D webpack babel-core babel-loader babel-preset-es2015 babel-preset-stage-0
2. 配置webpack和babel
（1）webpack.config.js
const path = require('path');
module.exports = {
// 编译入口，支持多入口
// 本例中只有一个入口，名字为main（名字在后面会用到）
// 相应入口文件地址为`./src/index.js`
entry: {
main: path.resolve('./src/index.js')
},
output: {
// webpack打包结果输出文件夹
path: path.resolve('./dist/'),
// webpack打包结果文件名字
// 其中name变量为入口的名字，为了支持多入口，
// 本例中只会编译出一个文件main.js
filename: '[name].js',
// 配置webpack-dev-server打包文件路径
publicPath: 'dev/'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
};
（2）.babelrc
{
"presets": [
"es2015",
"stage-0"
]
}
3. 新建src/index.js和index.html
（1）src/index.js
alert(1);
（2）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>Document</title>
</head>
<body>
<!-- 注意，如果使用webpack-dev-server，js路径应该为publicPath+filename -->
<!-- 如果使用webpack --watch，js路径应该为path+filename -->
<!-- 实际开发过程中可以设置为同一个，这里是为了表示区别 -->
<script src="./dev/main.js"></script>
</body>
</html>
4. 当前目录结构如下
.
├── index.html
├── package.json
├── src
│ └── index.js
└── webpack.config.js
5. 在工程根目录中，运行webpack-dev-server
$ webpack-dev-server
打开浏览器，
http://localhost:8080/index.html
会alert(1)。
修改src/index保存，浏览器会自动刷新。
6. 注意事项
（1）webpack --watch和webpack-dev-server都会用到webpack.config.js，
但是他们读取的配置项不同。
webpack --watch读取的是，entry，output.path和output.filename，
webpack-dev-server读取的是，entry，output.publicPath和output.filename。
因此，本例中，webpack --watch会打包生成./dist/main.js，
而webpack-dev-server会打包生成./dev/main.js。
使用webpack-dev-server的时候，index.html中应该引用./dev/main.js。
（2）webpack-dev-server在文件系统中，并没有实际生成文件
./dev/main.js只在内存中存在，在文件夹中是看不到的。
网友评论