3

目录

上节:使用loader之打包样式下

首先删除bundles, 删完后目录如下:

clipboard.png

之前每次都要 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服务:

clipboard.png

浏览器访问:http:localhost:8080, 应出现如下页面:

clipboard.png

这时每次修改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();

然后浏览器运行如图:

clipboard.png

随机点击数次数字1后如图:

clipboard.png

此时是13和1000,然后改变number.js里的1000,在看浏览器:

clipboard.png

浏览器会刷新一下,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
clipboard.png

再来改变number.js,把3000改成1000,观察浏览器:
此时浏览器没有刷新,单页面已经发生变化,3000变成了1000,并且上面那个数字还是6

这里就有个问题了,为啥之前改less时hmr能直接生效,改js就要自己手动写一坨逻辑呢?
那是因为style-loader底层已经帮我们写好了这种逻辑。

下节:webpack-dev-server下


会js的诸葛村夫
282 声望617 粉丝

主angular,兼ts|webpack|rxjs|vue,擅长造轮子