介绍
每次要编译代码时,手动运行 npm run build 就会变得很麻烦,devServer可以做到代码更新后自动打包并刷新浏览器。使用deServer后不会产生dist目录,为了打包的效率文件都会放入内存里。
安装
npm install --save-dev webpack-dev-server
自动打包配置
webpack.config.js
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"url-loader": "^4.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"node-sass": "^4.14.1",
"postcss-loader": "^4.0.2",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
// 监听文件的变化自动打包
"watch": "webpack --watch",
// 打开浏览器,源代码改变时自动刷新浏览器
"start": "webpack-dev-server --open",
"boundle": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"url-loader": "^4.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"node-sass": "^4.14.1",
"postcss-loader": "^4.0.2",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
// 监听文件的变化,自动打包
"watch": "webpack --watch",
// 打开浏览器,源代码改变时自动刷新浏览器
"start": "webpack-dev-server --open",
"boundle": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
使用
1.npx webpack,打包好文件
2.npm start,启用devServer
热更新代码
当我们想修改一段代码时,不想刷新浏览器时,按照下面来配置webpack.config.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
devServer: {
contentBase: './dist',
hot: true, //开启hotModule
hotOnly: true //即使hotModule失败,也不重新刷新浏览器
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin() //引入热更新的插件
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};
测试代码
当你更改css颜色时,浏览器样式就自动变化,但不会刷新浏览器,页面数据将保留。
div:nth-of-type(odd){
background-color: pink;
}
js引入css代码
import './index.css'
var btn = document.createElement('button');
btn.innerHTML = '新增';
document.body.appendChild(btn);
btn.onclick = function () {
var div = document.createElement('div');
div.innerHTML = ' item';
document.body.appendChild(div);
}
html代码引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<div id="root"></div>
</body>
</html>
js代码热更新
css代码可以做到不刷新浏览器更新,js代码需要自己设置监听去更新。写在引入something.js的文件中.
if (module.hot) {
// 当监听的文件发生热更新会调用此方法
module.hot.accept('./something.js', function () {
console.log('Accepting the updated printMe module!');
})
}