Webpack-dev-server 使用示例
2017-01-12 本文已影响242人
EyluWang
写在开始
前面，我们学习了 webpack 的基础使用，使用命令生成打包后的文件。
但是，每次修改代码，都要重新运行命令...生成文件...刷新页面，反复操作。
其实，可以使用 webpack-dev-server 可以很方便的做成服务端，可以完成自动刷新、热替换等功能。
示例1：命令行
1、安装
mkdir /你的工作目录/app-demo
cd /你的工作目录/app-demo
npm init
npm install webpack webpack-dev-server -g
npm install webpack css-loader style-loader --save-dev
2、创建测试文件
新建 app-demo/entry.js 文件：
require("./styles.css");
document.write('<h2>Hello ，Webpack Dev Server !!!</h2>');
新建 app-demo/styles.css 文件：
body {
background: red;
}
3、运行
webpack-dev-server ./entry --hot --inline --module-bind "css=style\!css"
4、访问 http://localhost:8080/bundle
此时，我们会看到页面背景为红色，可以修改为其他颜色，不用手动刷新可以自动热更新。
示例2：配置文件
1、安装
mkdir /你的工作目录/app-demo-hmr
cd /你的工作目录/app-demo-hmr
npm init
npm install webpack webpack-dev-server -g
npm install webpack css-loader style-loader --save-dev
2、创建测试文件
新建 app-demo-hmr/src/main.js 入口文件：
require("./styles.css");
document.write('<h2>Hello ，Webpack HMR !!!</h2>');
新建 app-demo-hmr/src/styles.css 文件：
body {
background: red;
}
新建 app-demo-hmr/build/index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="assets/bundle.js"></script>
</body>
</html>
新建配置文件 webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
app: ["./src/main.js"]
},
output: {
path: path.resolve(__dirname, "build/"),
publicPath: "/assets/",
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css'
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: 'build/',
inline: true,
hot: true
}
};
4、运行命令
webpack-dev-serve
Paste_Image.png
可以看到，项目已启动，可以正常访问。并且，在控制台中启动了热替换。
参考
https://segmentfault.com/a/1190000006964335
http://www.tuicool.com/articles/aiEva2Q
