zoukankan      html  css  js  c++  java
  • webpack

    webpack 是一个预编译模块打包工具,它只会对使用到的模块进行打包。
    一个模块是否被使用?可以根据该模块是否被 require 来判断。如果require时指定的是具体的模块名称与正确的路径,那么 webpack 便可以在编译打包时正确的引用到该模块。

    require('tools'); //preset alias tools 
    require('./js/main');
    

    如果 require的只是一个表达式(即需要运算才能得到结果),对于 webpack而言结果就不会精确了。

    require('./img/' + name + '.jpg');
    

    由变量 name 结合常量 ./img/.jpg 等构成的一个表达式,其最终的结果是需要执行才会得知的,但是 webpack本身又是一个预编译的打包工具,因此这里 webpack并不知道你最终会打包那个模块,所以在打包时就需要自己分析并提取出如下的关键信息:

    • directory : ./img
    • Regular expression : /^.*.jpg$/

    当你在请求一个含有表达式的模块时,webpack并不能预先精准匹配到要打包的模块,所以它会自动创建一个上下文语句,这个上下文的起点就时你当前 require所处的 JS文件,然后根据你指定的目录与要匹配的模块类型(扩展名)来生成一个正则表达式,然后在根据这个正则匹配
    将指定目录下的所有符合匹配条件的模块都打包进来。

    由此我们可以说明 webpack可以通过require进行动态模块加载,但是会将指定匹配目录下的所有符合条件的模块都打包进来。

    另外上下文语句还包含了一个将模块加载翻译成对应模块id的字典。以上例为例的话,它就类似于:

    ’./img/webpack.jpg‘ : 42,
    './img/nodejs.jpg':43,
    './img/express.jpg' :44
    

    当然,你也可以手动创建一个上下文语句,通过手动创建上下文,你可以自定义一个模块打包范围。
    首先,通过 require.context 来创建上下文,它接受三个参数,分别是“指定要打包的目录”,“是否搜寻子目录”,“匹配的正则”。
    同样的,上下文的起点就是当前的JS文件。

    var context = require.context('../img',false,/^.*.jpg/);
    
    console.log(context.keys()); //拿到匹配的到模块Map表。
    console.log(context('./webpack.jpg'));//拿到最终打包好的模块。
    

    总结:不论是自动创建上下文语句还是手动创建上下文语句,上下文语句本身就有不容忽视的作用,因为它可以在 webpack打包的默认流程中加入你自己额外定制的流程。

  • 相关阅读:
    angularJS解决数据显示闪一下的问题?-解决办法
    js 做账单处理
    淘宝cnpm
    js 对象转数组
    js 移动端上拉刷新(基于ng1)
    js 控制超出字数显示省略号
    select2 插件编辑时设置默认值
    select2 插件加载后端数据
    js 依据“;”折行
    css 两段对齐和超出部分...
  • 原文地址:https://www.cnblogs.com/HCJJ/p/9347159.html
Copyright © 2011-2022 走看看