zoukankan      html  css  js  c++  java
  • 什么是模块打包工具

    认识到webpack可以认识import,可以翻译index.js。可能我们就认为webpack就是js的一个翻译器。划重点,,,不是的。。。
     
    webpack实际上称不上是一个翻译器,因为呢,他只认识import这样的语句,其它高级的js语法,他一概不认。所以把webpack看作一个js翻译器,实际上是高看了他,我们去搜索webpack的定义,是这样的
    webpack is a module bundler
    webpack实际上是一个模块打包工具
    index.js
    import Header from './header';
    import Sidebar from './sidebar';
    import Content from './content';
    
    new Header();
    new Sidebar();
    new Content();

    header.js

    function Header() {
      var dom = document.getElementById('root');
      var header = document.createElement('div');
      header.innerText = 'header';
      dom.appendChild(header);
    }
    export default Header;

    siderbar.js

    function Sidebar() {
      var dom = document.getElementById('root');
      var sidebar = document.createElement('div');
      sidebar.innerText = 'sidebar';
      dom.appendChild(sidebar);
    }
    
    export default Sidebar;
    content.js
    function Content() {
      var dom = document.getElementById('root');
      var content = document.createElement('div');
      content.innerText = 'content';
      dom.appendChild(content);
    }
    export default Content;
    我们看之前这个文件,Header是什么呢,是一个模块,Sidebar和Content一样,也是一个模块。webpack的作用实际上可以把这些模块打包到一起的这样一个工具。所以他叫做模块打包工具。所以一看到import,就应该想到后面是一个模块。
    我们在写代码的时候,不仅碰到过ES Moudule这样的模块规范,还有commonJS(node里面最常用的模块规范),CMD,AMD。
    这样的模块规范,webpack一样可以正确的识别。举个例子,我们把index.js的方式改成commonJS的方式。
    var Header = require('./header.js');
    var Sidebar = require('./sidebar.js');
    var Content = require('./content.js');
    
    
    new Header();
    new Sidebar();
    new Content();
    commonJS是require这样的导入方式,如果这样导入的话,相应的导出模块也要有相应的变化。不再是是export default的方式了。要用commonJS的规范
    header.js
    function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = 'header';
    dom.appendChild(header);
    }
    module.exports = Header;
    sidebar.js
    function Sidebar() {
    var dom = document.getElementById('root');
    var sidebar = document.createElement('div');
    sidebar.innerText = 'sidebar';
    dom.appendChild(sidebar);
    }
    
    
    module.exports = Sidebar;
    content.js
    function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('div');
    content.innerText = 'content';
    dom.appendChild(content);
    }
    module.exports = Content;
    这样就可以了,module.exports是commonJS的导出方式,webpack是一个模块打包工具,他可以识别出任何模块引入的语法。
    所以到这,就可以很明显的知道webpack不是翻译器,他是一个模块打包工具。最早的时候,webpack推出的时候,他是一个js的模块打包工具。随着webpack的发展,他已经不仅仅是js文件了。他还可以打包其它任何形式的模块文件。比如在react,vue的框架里面
    var style = require('./index.css');
    或
    import style from './index.css';
    他还可以打包jpg,png这样的图片文件,他可以打包任何你想打包的内容,所以webpack准确的定义,他就是一个模块打包工具。



  • 相关阅读:
    Splay板子
    HZOI帝国2019欢乐时刻
    数据分析体系 — 用户粘性的两个计算指标(DAU/MAU和月人均活跃天数)
    mysql—MySQL数据库中10位时间戳转换为标准时间后,如何对标准时间进行加减X天处理
    每日一题力扣575 分糖果
    每日一题力扣455 小饼干和孩子
    每日一题力扣561
    每日一题力扣121 最佳买股票
    每日一题力扣605 种花问题
    每日一题力扣605 种花问题
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10704956.html
Copyright © 2011-2022 走看看