webpack实战3之异步加载js

注意:

本文假设你有webpack 的基础认识。

本文的目的是异步加载js

项目结构如下所示:

81498120603_.pic.jpg

开始实战

创建一个目录<code>webpack-demo3</code>,并安装<code>wbepack</code>。

  mkdir webpack-demo3 && cd webpack-demo3
  npm init -y
  npm install --save-dev webpack

安装<code>html-webpack-plugin</code>

npm install html-webpack-plugin --save-dev

新建<code>index.html</code>文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

新建<code>a.js</code>文件

module.exports=function dom(elem){
   return document.querySelector(elem)
}

新建<code>b.js</code>文件

module.exports=function say(elem){
   console.log('今天天气真好');
}

新建<code>index.js</code>文件

require('./b')();
require.ensure([], function (require) {
    const dom = require('./a.js');
    dom('#root').innerHTML = 'hello world';
});

webpack 在构建时,会静态解析(statically parse)代码中的 require.ensure()。在其中任何被引用的依赖模块,或在回调函数中被 require() 的模块,都将被分离到一个新的 chunk 中。这个新的 chunk 会被生成为异步的 bundle,由 webpack 通过 jsonp 来按需加载。

新建<code>webpack.config.js</code>文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html',
            filename:'index.html',
            inject:'body'
        })
    ]
}

HtmlWebpackPlugin该插件将所有生成的js文件自动引入index.html中。当文件名带有hash值时,这个插件尤其有用。
HtmlWebpackPlugin会根据模版生成一个新的html文件。

打包代码:‘

webpack --config webpack.config.js 

你会发现在dist文件夹中,生成了0.bundle.js,bundle.js,index.html

查看每个文件,你会发现,b.js和index.j的代码被打包到了bundle.js中。而a.js中的代码被打包到了0.bundle.js。
index.html中只包含了一个script标签( <script type="text/javascript" src="bundle.js"></script>),因为0.bundle.js将通过bundle.js异步加载。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,091评论 7 109
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 7,658评论 40 247
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,554评论 7 35
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 5,932评论 2 72
  • 朋友有很多种。关系好也有很多种好法。有相同爱好,有共同语言,三观有共鸣,曾经帮助过我,或者参与了我人生中一段难忘的...
    Sunny小夕呀阅读 695评论 0 0
  • 我们新一代年轻人应当对待日本的态度 这是一本深入剖析日本人性格的文化经典书籍。 1951年,这本书被列入“日本教养...
    顺水顺风阅读 264评论 0 1
  • 123
    乐平陈祉羽阅读 82评论 0 0
  • 斯坦福大学著名发展心理学家卡罗尔.德韦克在过去的10年里,和她的团队都在研究表扬对孩子的影响。他们对纽约20所学校...
    慢曼说阅读 163评论 0 1
  • 简介 今天在掘金上看了一篇文章,实现自定义软键盘,发现其实实现方式比较简单,不需要改动系统api,只是单纯的加载自...
    fushuang阅读 3,997评论 1 14