webpack4.29.x成神之路（九） webpack-dev-server上

目录

上节： 使用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下（待更新）