目录
上节：使用loader之打包样式下
首先删除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底层已经帮我们写好了这种逻辑。
下节：webpack-dev-server下（待更新）