注意：
本文假设你有webpack 的基础认识。
本文的目的是实现一个服务器和实时刷新的功能。
当文件发生改变并保存后，浏览器能够自动刷新页面，使得用户无需手动刷新界面。
项目结构如下所示：
91498130935_.pic.jpg
开始实战
创建一个目录<code>webpack-demo4</code>,并安装<code>wbepack</code>。
mkdir webpack-demo4 && cd webpack-demo4
npm init -y
npm install --save-dev webpack
安装 <code>webpack-dev-server</code>,<code>style-loader</code>,<code>css-loader</code>
npm install webpack-dev-server style-loader css-loader --save-dev
webpack-dev-server的作用是为你提供了一个服务器和实时刷新的功能。
新建<code>index.html</code>文件
<!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>
<script src="/bundle.js"></script>
</body>
</html>
注意： script标签中的文件路径不能写成’./dist/bundle.js',必须写成'/bundle.js'或'http://localhost:8080/bundle.js'。
这是因为<code>webapck-dev-server</code>使用内存编译，所以bundle 不会被保存在硬盘上，你看不到编译后的文件。
使用内存编译的工具还有<code>webpack-dev-middleware </code>
新建<code>index.css</code>文件
.root {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background: red;
}
新建<code>index.js</code>文件
import './index.css';
function create(){
const elem = document.createElement('div');
elem.classList.add('root');
elem.innerHTML = 'Hello World haha';
document.body.appendChild(elem);
}
create();
新建<code>webpack.config.js</code>文件
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
这里去掉了output对象中的“path:path.resolve(__dirname,'dist')”的代码。这因为内存编译，不输出具体文件，所以不必指定dist文件夹了。
修改<code>package.json</code>文件中的'scripts'
"scripts": {
"start": "webpack-dev-server --open"
},
最后启动命令
npm start
你会发现页面会自动在浏览器打开。这个时候，不管你修改index.js还是index.css样式，浏览器都会自动刷新页面。
网友评论