您的位置：首页 > Web前端 > Webpack

webpack（四）本地服务器环境配置

2016-08-04 11:07 423 查看

配置内置环境

启动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了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 自动化浏览器服务器

相关文章推荐

新的分享

章节导航