配置内置环境
启动webpack内置环境以后每次修改都会自动打包，在这一步将配置浏览器的自动刷新，让其更加自动化。
- 修改package.json 的 scripts 部分
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
}在命令行里运行 npm run dev 的时候就会执行 dev 属性里的值
1.webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
2.--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
3.--progress - 显示合并代码进度
4.--colors - 命令行中显示颜色！
5.--content-base build - 指向设置的输出目录
运行 npm run dev 启动 Web 服务器
访问 http://localhost:8080 看效果
浏览器自动刷新
运行 webpack-dev-server 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 index.html 放到 build/ 文件夹下，然后做这样的修改：
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>增加一个脚本当发生改动的时候去自动刷新应用，你需要在配置中增加一个入口点。
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/entry.js')
],
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
},
}这样浏览器的自动刷新就OK了。
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
