webpack4.0 懒加载和热更新

1.懒加载

懒加载我们都知道，不即时加载所有资源，而是在需要的时候才加载。想想有这么一个业务场景，有一个页面，内容繁多，其中有一个视频播放区块，点击按钮会播放视频，视频的js是一个插件（假设功能复杂，代码量很大），用户有可能点击播放视频，也有可能不播放，而浏览页面中其他的内容，在传统的书写方式中，我们只能家在全部资源，那么如果他不点击播放，却用很多的流量去加载这个js，实在浪费。现在我们可以使用懒加载来美化这个过程，只有当用户点击播放了，我们再来加载这个js

//index.js
let button = document.createElement("button");
button.innerText = "播放";

button.addEventListener("click", function() {
  // es6 草案中的语法， 用jsonp实现动态加载文件, 需要插件@babel/plugin-syntax-dynamic-import
  import("./source.js").then(data => {
    // promise对象
    console.log(data.default); // 挂载在了default属性上
  });
});

document.body.appendChild(button);

打包（npx webpack）时，会提醒，缺少必要的插件@babel/plugin-syntax-dynamic-import，这个插件是babel提供的，用来动态加载文件。
安装完成之后，在webpack配置文件中将这个插件加到js模块的配置中

//webpack.config.js
module: {
    noParse: /jquery/, //  第一个优化点： 不去解析jquery中的依赖库
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve("src"),
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-syntax-dynamic-import"]
            }
          }
        ]
      }
    ]
  }

打包，success.......大功告成

懒加载js.gif
如果你跟着做到这里能达到懒加载的效果并且不报错，那么后边的就不用看了。我在做这个例子的时候，一切准备就绪之后，打包文件一直报如下错误：

Module parse failed: 'import' and 'export' may only appear at the top level (45:8)
You may need an appropriate loader to handle this file type.

google了下，可能是因为这个包“acorn”的原因，它是一个webpack的依赖，试着更新下它
npm update acorn --depth 20
到这，我的问题是解决了。

2.热更新

首先在devServer中添加hot字段，并且配置为true；然后再插件中引入热更新插件

//webpack.config.js
 plugins: [
    ...
    new webpack.NamedModulesPlugin(), // 打印更新的模块路径   (首先，需引入webpack)
    new webpack.HotModuleReplacementPlugin() //热更新插件
  ]
// index.js
import str from "./source";
console.log(str);
//source.js
module.exports = "source";

运行 npx webpack-dev-server,可以看到，每次修改source并且保存后，页面都会刷新一次。这不是热更新，因为它每次都会强刷。修改index.js

// index.js
import str from "./source";

console.log(str);

if (module.hot) {
  module.hot.accept("./source", () => {
    let str = require("./source");
    console.log(str);
  });
}

这样，每次更改source，不刷新页面，会直接替换资源