首先删除bundles, 删完后目录如下:
之前每次都要 npm run build后才能看打包后的效果,在开发阶段是不可能这么干地,我们需要一个能使代码及时生效的功能。
webpack自带的webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载
基本使用
修改配置:
webpack.config.js:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].[contenthash:8].js',
path: resolve(__dirname, 'bundles')
},
// 开启devServer
devServer: {},
module: {
rules: [{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: ['url-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new CleanWebpackPlugin()
]
};
src/index.js:
import './styles/index.less'
window.addEventListener('DOMContentLoaded', function() {
const root = document.getElementById('root');
root.innerText = _.join(['hellow', 'webpack'], '~');
});
src/styles/index.less:
#root{
color: blue;
}
修改package.json的script对象:
// 省略
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
// 省略
webpack-dev-server和webpack都会默认读取根目录下的webpack.config.js
安装依赖:npm i webpack-dev-server -D
装完后执行npm run dev,就会开启一个node服务:
浏览器访问:http:localhost:8080, 应出现如下页面:
这时每次修改src/index.js,浏览器就会自动刷新咯。
热模块更新
现在修改代码后,浏览器会有一个刷新的动作,如果想达到无刷新的效果,需要配置写选项
webpack.config.js:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].[hash:8].js',
path: resolve(__dirname, 'bundles')
},
// 开启devServer
devServer: {
hot: true,
// 可选,即使代码没生效,也不刷新浏览器
hotOnly: true
},
module: {
rules: [{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: ['url-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
这时重新执行 npm run dev, 打开浏览器, 字体颜色应该是蓝的,这时随便换个颜色,浏览器就能无刷新生效了。
但是有个问题,如果改变src/index.js的代码,浏览器不会有任何反应,原因是开启了hotOnly,如果把hotOnly去掉
devServer: {
hot: true
}
这时改index.less没问题,但是改index.js,浏览器还是会刷新一下,这说明改js并未实现热更新效果。
继续改代码,在src下新建js目录,并新建counter.js和number.js
src/js/counter.js:
let num = 1;
export default function counter() {
const div = document.createElement('div');
div.setAttribute('id', 'counter');
div.innerText = num;
div.onclick = function () {
div.innerText = ++num;
}
document.body.appendChild(div);
}
src/js/number.js:
export default function number() {
const div = document.createElement('div');
div.setAttribute('id', 'number');
div.innerText = 1000;
document.body.appendChild(div);
}
src/index.js:
import counter from './js/counter';
import number from './js/number';
counter();
number();
然后浏览器运行如图:
随机点击数次数字1后如图:
此时是13和1000,然后改变number.js里的1000,在看浏览器:
浏览器会刷新一下,1000变成了3000,但是13也重置成了1
我们的想法是,当我们改变number.js文件时,页面上只改变number.js那部分内容,其它地方保持原样,比如保持13,这时就需要再做点事情
src/index.js:
import counter from './js/counter';
import number from './js/number';
counter();
number();
if (module.hot) { // 如果开启了热更新
module.hot.accept('./js/number', function() {
// ./js/number变化时执行
console.log('number updated!');
document.body.removeChild(document.getElementById('number'));
number();
})
}
这时在此点击几次数字1:
比如页面上是:6和3000
再来改变number.js,把3000改成1000,观察浏览器:
此时浏览器没有刷新,单页面已经发生变化,3000变成了1000,并且上面那个数字还是6
这里就有个问题了,为啥之前改less时hmr能直接生效,改js就要自己手动写一坨逻辑呢?
那是因为style-loader底层已经帮我们写好了这种逻辑。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。