前端模块系统的发展史 -- Webpack

本贴最后更新于 2340 天前,其中的信息可能已经渤澥桑田

Webpack 是什么

我们在使用 React、Angular、Vue 或者自定义的前端框架时,基本上都会使用到 Webpack,因为不管你的模块形式是 CommonJS、AMD 还是一般的 JS 文件,或者你需要动态表达式 require("./"+name+".jade") Webpack 基本上都可以帮你解决。加上他的 Loader 转换器可以将其它各种非 JavaScript 模块资源都转换成 JavaScript,并帮你处理。它不光有自己的 API 方便使用,还有一套完整的插件体系,开发者可以通过插件进行快速的开发,并且大部分插件都是开源的。

通过配置文件来了解 Webpack

虽然从 webpack v4.0.0 开始,可以不用引入一个配置文件,但是要真正了解 webpack 还是需要从它的配置文件说起。

这里给一个例子,有些注释写的不对的地方请大家指出:

const path = require('path');

module.exports = {
  mode: "production", // 这个是最优化的编译结果
  mode: "development", // 开发模式,可以使用很多的工具来增强开发
  mode: "none", // 什么也不做,注意它不是默认值

  //入口文件的位置
  entry: "./app/entry", 
  entry: ["./app/entry1", "./app/entry2"],
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },

  //输出路径
  output: {
    
    path: path.resolve(__dirname, "dist"), // string
    
    filename: "bundle.js",  //单页的输出
	filename: "[name].js", // 多页的输出
    filename: "[chunkhash].js", //文件缓存(长期的),原来的文件名上带一串hash字符串,自己测试只适用于js和css 
    publicPath: "/assets/", //资源路径   
	publicPath: "",
    publicPath: "https://cdn.example.com/",

    library: "MyLibrary", 

	//这里可以参见前面一篇文章
    libraryTarget: "umd",      
	libraryTarget: "umd2", 
    libraryTarget: "commonjs2", 
    libraryTarget: "commonjs", 
    libraryTarget: "amd", 
    libraryTarget: "this", 
    libraryTarget: "var", 
    libraryTarget: "assign", 
    libraryTarget: "window", 
    libraryTarget: "global", 
    libraryTarget: "jsonp", 
    
    chunkFilename: "[id].js",
    chunkFilename: "[chunkhash].js", 
   
    jsonpFunction: "myWebpackJsonp", 
   
   //源文件的映射,方便调试
    sourceMapFilename: "[file].map", 
    sourceMapFilename: "sourcemaps/[file].map", 
    
    devtoolModuleFilenameTemplate: "webpack:///[resource-path]", 
    
    devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", 
    
	//如果output.libraryTarget设置为umd, `output.library设置了,这个选项设为true将会给命名给amd模块`
    umdNamedDefine: true, // boolean
    // use a named AMD module in UMD library
	
	//选项用于跨域加载chunks
    crossOriginLoading: "use-credentials", //这里是一个枚举选项,允许跨域加载,会在请求中发送证书
    crossOriginLoading: "anonymous", //匿名,不发送证书
    crossOriginLoading: false, //设为false禁止跨域加载
   
   //模块的配置项
  module: {
    rules: [
     // 这里使用我换成常用的一些loader
            {
                test: /\.js$/,

                enforce: 'pre',

                loader: 'eslint-loader',

                options: {

                    emitWarning: true,

                    fix: true

                },

            },



            //使用scss-loader | css-loader和style-loader

            {

                test: /\.(css)$/,

                // exclude: /node_modules/,

                use: plugin.extract({

                    use: [{

                            loader: 'css-loader',

                            options: {

                                module: true,

                                imporLoader: 1,

                                sourceMap: true,

                            },

                        },

                    ],



                    fallback: 'style-loader',



                }),



            },



            //对图片和字体进行打包

            {

                test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,

                loader: 'url-loader?limit=100&name=resource/[name].[ext]'

            },





        ],

  },
  //这个模块解决模块的请求,他不适用于loader
  resolve: {
 
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
  

    extensions: [".js", ".json", ".jsx", ".css"],
    //这里用来设置别名
    alias: {
   
      "module": "new-module",
     
      "only-module$": "new-module",

      "module": path.resolve(__dirname, "app/third/module.js"),
     t
    },
   alias: [
      {
        name: "module",
        // the old request
        alias: "new-module",
        // the new request
        onlyModule: true
        // if true only "module" is aliased
        // if false "module/inner/path" is also aliased
      }
    ],
	 symlinks: true,
    // follow symlinks to new location
    descriptionFiles: ["package.json"],
    // files that are read for package description
    mainFields: ["main"],
    // properties that are read from description file
    // when a folder is requested
    aliasFields: ["browser"],
    // properites that are read from description file
    // to alias requests in this package
    enforceExtension: false,
    // if true request must not include an extensions
    // if false request may already include an extension
    moduleExtensions: ["-module"],
    enforceModuleExtension: false,
    // like extensions/enforceExtension but for module names instead of files
    unsafeCache: true,
    unsafeCache: {},
  
    cachePredicate: (path, request) => true,
   
   //插件的使用,比如压缩,处理网页模板等插件的使用,大家可以去更多的到网上去查查,这里就不再赘述
    plugins: [
      // ...
    ]
   
  }
};

这里基本上算是将前端模块系统的发展史给介绍完了,如果有写的不是很清楚或者不正确的地方,希望大家能够提出。

接下来,我将写一系列的 Angular4+ 的文章,大家可以继续关注。

最后,我再给大家一个 CSS 的蜡烛动画的代码,这里不给出效果,大家自己动手去试一下,算是对之前 css 动画系列的一个补充:


<div class="candle">
  <span class="glow"></span>
  <span class="flames"></span>
  <span class="thread"></span>
</div>



<style>
body{
 background: #000510;
  font-family: 'Titillium Web', sans-serif;
  width: 100%;
  width: 150em;
    height: 40em;
}
.candle {
    width: 15em;
    height: 30em;
    font-size: 7px;
    background: linear-gradient(
        orange,
        darkorange,
        sienna,
        saddlebrown 50%,
        rgba(0, 0, 0, 0.6)
    );
    box-shadow: 
        inset 2em -3em 5em rgba(0, 0, 0, 0.4),
        inset -2em 0 5em rgba(0, 0, 0, 0.4);
    border-radius: 10em / 4em;
    position: relative;
    display: flex;
    justify-content: center;
    top: 10em;
}

.candle::before {
    content: '';
    position: absolute;
    width: inherit;
    height: 5em;
    border: 0.2em solid darkorange;
    border-radius: 50%;
    box-sizing: border-box;
    background: radial-gradient(
        #444,
        orange,
        saddlebrown,
        sienna,
        darkorange
    );
    filter: opacity(0.7);
}

.thread {
    position: absolute;
    width: 0.6em;
    height: 3.6em;
    top: -1.8em;
    background: linear-gradient(
        #111,
        black,
        orange 90%
    );
    border-radius: 40% 40% 0 0;
}

.flames {
    position: absolute;
    width: 2.4em;
}

.flames::before {
    content: '';
    position: absolute;
    width: inherit;
    height: 6em;
    background-color: royalblue;
    top: -4.8em;
    border-radius: 50% 50% 35% 35%;
    border: 0.2em solid dodgerblue;
    box-sizing: border-box;
    filter: opacity(0.7);
}

.flames::after {
    content: '';
    position: absolute;
    width: inherit;
    height: 12em;
    top: -12em;
    background: linear-gradient(white 80%, transparent);
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 -0.6em 0.4em darkorange;
    animation: 
        enlarge 5s linear infinite,
        move 6s linear infinite;
}

@keyframes move {
    0%, 100% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}

@keyframes enlarge {
    0%, 100% {
        height: 12em;
        top: -12em;
    }

    50% {
        height: 14em;
        top: -13em;
    }
}

.glow {
    position: absolute;
    width: 10em;
    height: 18em;
    background-color: orangered;
    border-radius: 50%;
    top: -17em;
    filter: blur(6em);
    animation: blink 100ms infinite;
}

@keyframes blink {
    to {
        filter: blur(6em) opacity(0.8);
    }
}
</style>

  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 252 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 30 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 535 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    30 引用 • 96 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    343 引用 • 723 回帖 • 1 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 638 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 149 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 101 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 745 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 5 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 39 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 535 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 75 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 24 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 635 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖 • 1 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1737 回帖 • 3 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    692 引用 • 535 回帖
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 517 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 592 关注