zoukankan      html  css  js  c++  java
  • webpack基础教程:(一)

    1. 介绍 

    1.1 webpack是更优秀的前端模块依赖管理工具。它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。他的目标是:

    • 拆分依赖树(dependency tree)为多个按需加载的chunk
    • 保证快速首屏加载
    • 每种静态资源都可成为模块
    • 能够将第三方库视作一个模块来处理
    • 能够定制模块打包器的几乎任何部分
    • 大型项目的项目打包解决方案

      1.2 既然所有资源都是模块,那如何实现模块依赖?

      在 Webpack 当中, 所有的资源都被当作是模块。

    //典型的common JS格式
    require("./lib.js"); require("./style.css"); require("./style.less"); require("./template.jade"); require("./image.png");

      1.3 关于资源加载器

      对应各种不同文件类型的资源,Webpack有对应的模块loader

    module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

       1.4 webpack的优势

    • webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移
    • 一切资源皆是模块
    • 能够替代gulp/grunt等构建工具,提高开发效率
    • 扩展性强,插件机制完善,特别是支持 React 热插拔(见 react-hot-loader )的功能让人眼前一亮
    • https://diamont1001.github.io/webpack-summary/

      1.5 webpack工作原理

    • Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 output对象所设置的文件。
    • Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
    • 在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

      

  • 相关阅读:
    Lucene.NET 开发实现
    WIN7安装配置 SharePoint2010 各种问题汇总
    Wince后台系统补丁更新实现
    Lucene.NET 若干知识点&&疑难杂症以及解决
    .NET设计模式系列文章 很有名的博客园TerryLee的系列文章,设计模式不可多得的好文
    客户端多线程应用的好工具:BackgroundWorker
    Swift、ObjectiveC 单例模式 (Singleton)
    字节对齐
    iOS中求出label中文字的行数和每一行的内容
    工作终于到的坑爹集锦,欢迎补充~
  • 原文地址:https://www.cnblogs.com/gao-xiong/p/6000819.html
Copyright © 2011-2022 走看看