webapck 全局定义jquery_jquery如何声明全局变量定义全局变量但是方法内部无法使用 - CSDN
精华内容
参与话题
  • webpack如何全局引入jquery和插件?

    万次阅读 2017-02-03 13:36:25
    之前试过把jQuery打包进vendor,虽然$好用了,但是jQuery下的一系列插件就叫苦了。你想直接从html中引入jQuery的第三方插件?有点不可能,既然$算是webpack中的一个变量,那么你只能通过require的方式引入jQuery的第...

    之前试过把jQuery打包进vendor,虽然$好用了,但是jQuery下的一系列插件就叫苦了。你想直接从html中引入jQuery的第三方插件?有点不可能,既然$算是webpack中的一个变量,那么你只能通过require的方式引入jQuery的第三方插件。第三方插件的结果只有两个,要不你就被打包引入你的js文件里,要不你就被引入vendor里。

     

    结果一:打包进引入的js文件里。如果多个js文件都引入了某个jQuery插件,那么就会出现很多重复的代码,冗余。

    结果二:打包进vendor里。如果都打包进一个vendor,那该文件得多大啊!自动手动配vendor?你知道哪个插件用到的次数多,哪个用到的少吗?麻烦

     

    后来我想,干脆第三方的插件我都不加入到webpack里,只有自己编写的代码用webpack来模块化就行了。第三方插件虽然都单独用了一个http请求,但它们改动不大,最终都会被浏览器缓存起来。

    于是,有以下几个需处理的事情:

    1、如何引入jQuery

    2、如何引入jQuery插件?

    3、如何引入不依赖jQuery的普通第三方插件?

     

    jQuery直接在html中引入,然后在webpack中把它配置为全局即可

    externals: {

    jquery: 'window.$'},

    使用则直接 require 进来,反正 webpack 也不会把它打包进来。

    var $= require('jquery');

    既然 $ 已经被设置为全局了,那么挂载在它下面的一系列 jQuery 插件就好办了,直接在 html 中引入。

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>

    js 中引入 jquery 直接使用即可。

    var $=require(jquery);

    $(#leftNav).nail();

    最后就是打包普通的第三方插件了。有两种方案,一种是直接用webpack打包到引用到插件的js里去,

    这种不用多说,直接引入就行。另一种则是像jQuery一样设置为全局变量,同样的方式引入与使用。

    externals: {

    artTemplate: 'window.template'},

    webpack没有requirejs的那种引入第三方插件然后可以忽悠打包的功能。所以我对于第三方的插件的做法就是以前该怎么引入就怎么引入,在webpack中设置一个全局即可


    参考博客:

    http://www.cnblogs.com/handoing/p/5866830.html

    https://www.zhihu.com/question/33448231

    https://segmentfault.com/a/1190000006000118


    展开全文
  • webpack入门(一)——webpack 介绍

    万次阅读 多人点赞 2016-12-29 23:35:51
    如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript。 2. 现代浏览器提供更广泛的接口。...模块系统风格目前有多个标准定义依赖和输出: 1. script标签(不要模块系统) 2. CommonJS

    如今的网站正在演化为web应用程序:
    1. 越来越多的使用JavaScript。
    2. 现代浏览器提供更广泛的接口。
    3. 整页刷新的情况越来越少,甚至更多代码在同一个页面。(SPA)

    因此有很多代码在客户端!
    一个体量庞大的代码库需要好好组织。模块系统提供代码库划分成模块的选项。

    模块系统风格

    目前有多个标准定义依赖和输出:
    1. script标签(不要模块系统)
    2. CommonJS
    3. AMD和它的一些变种
    4. ES 6
    5. 其它

    script 标签的样式

    下面这种就是不用模块系统,你会怎么去管理你的代码。

    <script src="module1.js"></script>
    <script src="module2.js"></script>
    <script src="libraryA.js"></script>
    <script src="module3.js"></script>

    模块接口导出到全局对象,即window对象。模块的接口可以访问全局对象的依赖关系
    常见问题

    全局冲突
    严重依赖加载的顺序
    开发人员必须人工解决模块/库的依赖关系
    大型项目,script一溜下来可以很长,难以管理

    CommonJs: 同步加载

    这种风格用同步require 的方法去加载一个依赖并用暴露一个接口。 一个模块可以通过给export对象添加属性或给module.exports设置值 来指定导出。

    require("module");
    require("../file.js");
    exports.doStuff = function() {};
    module.exports = someValue;

    服务器端node.js用的就是这种标准。
    优点:
    1. 服务器端模块可以重用
    2. 已经有许多模块用这种风格(npm)。生态圈良好
    3. 非常简单和容易使用。
    劣势
    1. 阻塞调用不适用网络。网络请求是异步的。
    2. 没有并行加载机制。
    哪些在用?
    1. 服务端 -node.js
    2. browserify
    3. modules-webmake -编译到一个包
    4. wreq -客户端

    AMD: 异步加载

    其它模块系统(例如 浏览器) 同步加载有困难(CommonJS) 而引入的一个异步版本(和定义模块和输出值的一种方法 )。

    require(["module", "../file"], function(module, file) { /* ... */ });
    define("mymodule", ["dep1", "dep2"], function(d1, d2) {
      return someExportedValue;
    });

    优点:
    1. 适合网络的异步请求的风格
    2. 并行加载多个模块。
    劣势
    1. 编码费力,更难读和写
    2. 看起来只是权宜之计。
    哪些在用?
    1. require.js
    2. curl

    ES6模式

    ES6借鉴其它语言给javascript新加了一些语法结构,有import语法。

    import "jquery";
    export function doStuff() {}
    module "localModule" {}

    优点:
    1. 静态分析很容易。
    2. 不会过时的ES标准 。
    劣势
    1. 浏览器支持需要时间。(迟早的事)
    2. 很少有模块用这种风格。生态圈
    目前没有公开的方案

    开发者应当自己选择适合自己的风格。允许现有的代码和包能正常工作,可以很容易地添加自定义模块风格。

    传输

    模块应该在客户端执行,所以他们必须从服务器传输到浏览器。
    传输模块有两个极端:
    1. 一个一个地传。
    2. 全部打包在一个里传。

    两种用法都泛滥,但是两种都太low了。

    一个一个地传
    优点:只有确实需要的模块才会传输过去。
    缺点:许多请求意味着很多开销。
    缺点:应用程序启动缓慢,因为请求延迟
    全部一个地传
    优点:请求的开销更少,更少的延迟
    缺点:很多暂时不需要的模块给传输过去了。

    分块传输

    更灵活的传输可能会更好。大多数情况下在这两种极端之间的折中比较好。
    =>在编译所有模块时:把模块切分成小块儿(chunks)。
    这样允许多个更小、更快的请求。有些模块不是一开始就需要的,含有这些模块的分块在需要的时候可以加载到。这样加快了初始化速度,但是在需要用那些模块时仍然让你去抓更多的代码。

    开发者怎么做“切分点”,可以根据情况自由抉择。
    =》一个代码库是可能的哟。

    注意:这些观点来自谷歌 GWT.

    怎么可能只有javascript

    为什么一个模块系统只能帮程序猿们解决javascript问题呢?还有许多其他资源需要处理:
    样式表
    图片
    web字体
    html模板
    等等

    或者 一些预编译和后编译语言
    coffeescript → javascript
    elm → javascript
    less 样式→ css 样式
    jade 模板→ javascript 生成 html
    i18n files → something
    等等

    这些东西应该也像下面这样容易:

    require("./style.css");
    require("./style.less");
    require("./template.jade");
    require("./image.png");

    静态分析

    当编译所有这些模块时,一个静态分析试图找到自己的依赖。
    传统上这只能找到简单的东西没有表达 。但是
    require("./template/" + templateName + ".jade") 这样是常见的结构。
    有些库是用一些不一样的风格写的。它们有些很奇怪(不可思议)。

    策略

    聪明的解析办法允许现存代码能跑起来,如果程序猿用了一些怪异的东西,它能试图找到兼容的解决方案。

    什么是webpack

    webpack是一个模块打包器。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。

    为什么另用一个打包器?

    现有的模块打包器不适合大项目(大单页面应用)程序。代码分割和静态资源无缝模块化的迫切需求,催生了一个新的模块打包器。
    我试图扩展现有的模块打包器,但是它没能实现所有的目标。
    目标如下:
    1. 把依赖树切分成块,实现按需加载。
    2. 保持低初始加载时间
    3. 每个静态资源都能是一个模块
    4. 具备把第三方库集成为模块的能力
    5. 具备打包器每个部分几乎都能自己定制的特点。
    6. 适合大型项目。

    webpack有什么不同?

    代码分割

    webpack依赖树中有两个依赖类型:同步和异步。异步模块切分成一个新的的块。在块树(chunk tree)优化之后,文件会为每个chunk发文件。

    loader

    webpack可以处理javascript本身,但loader用来将其它资源转换为javascript。这样以来,所有资源都被格式化成模块了。

    智能解析

    webpack有一个智能解析器,它能处理几乎所有的第三方库。它甚至允许你在依赖中你像这样加表达式 require("./templates/" + name + ".jade") 。它可以处理最常见的模块化标准风格:CommonJS和AMD。

    安装

    node.js

    安装node.js
    包管理工具 npm会一起装上。

    webapck

    webpack 可以用用npm 命令来装

    $ npm install webpack -g

    webpack 已经全局安装了,现在 webpack 命令可用了。

    项目中使用webpack

    你的项目最好也有webpack 依赖。 这样你可以在项目中自由决定用webpack哪个版本而必去用全局那个webpack。
    npm 命令添加一个 package.json文件

    $ npm init

    如果你不发布npm包,Init过程中的问题不重要,都可以忽略。
    安装webpack 并添加到package.json中:

    $ npm install webpack --save-dev

    版本

    有两个webpack版本可用。稳定版本和beta版。beta版 在版本字符中标记为 -beta 。beta版本可能包含脆弱的或者实验功能,都没进行过多少测试。正式场景下应该用稳定版。

    $ npm install webpack@1.2.x --save-dev

    开发工具

    如果你想用开发工具,先安装它

    $ npm install webpack-dev-server --save-dev
    

    更多相关文章

    webpack入门(一)

    webpack入门(二)

    webpack入门(三)

    webpack入门(四)

    webpack入门(五)

    webpack入门(六)

    8斗5车,查看更多技术文章。

    展开全文
  • webpack 3新学习

    千次阅读 2017-10-29 18:47:25
    webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代,让很多同学在学一个版本的时候,下一个新版本就发布了,让人感觉非常蛋疼和无奈: “我是谁,我在干嘛,我要做什么?” ...

    webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代,让很多同学在学一个版本的时候,下一个新版本就发布了,让人感觉非常蛋疼和无奈:

    “我是谁,我在干嘛,我要做什么?”

    不过,如果你已经掌握 webpack 比较老的版本,对于新版本的学习而言,应该只需要 0.5 天的工作量就可以完成。因为,其基本理念都是以 JS 为中心,增加的只是其辅助特性。

    webpack 到目前为止已经走过了三个大版本,每个版本之间都,增加了非常多可用的特性,但是每个版本的具体配置项都有些差异,很容易让老版本用户形成依赖。现在 webpack 3 已经走到了 3.8 版本。现版本对于 webpack 2.x 的配置项来说,最突出的就是 loader 的写法的改变和内置了 webpack-dev-server 的特性。

    所以,本文将带你全面了解一下 webpack 3.x 版本的新特性和一些常用的 webpack 3.x 的配置。

    entry-入口 JS 配置

    entry 选项主要用来定制 webpack 引用 JS 文件的主入口,它可以配置多个值来定义多个 JS 主文件入口。具体配置项为:

    entry可以是三种值[string | object | array]

    • 字符串:如 entry:’./src/index.js’,字符串也可以是函数的返回值,如entry: () => ‘./demo’。

    • 数组形式,如[react,react-dom],可以把数组中的多个文件打包转换为一个chunk;

    entry: ["./app/entry1", "./app/entry2"],
    • 对象形式,如果我们需要配置的是多页应用,或者我们要抽离出指定的模块做为公共代码,就需要采用这种形式了,属性名是占位符name的值,属性值可以是上面的字符串和数组,如下:
    // 值得注意的是入口文件有几个就会生成几个独立的依赖图谱。
    entry:{
        main:'./src/index.js',
        second:'./src/index2.js',
        vendor: ['react','react-dom']  // 将 react,react-dom 一起打包
    }

    有时候,开发者还会利用 require.resolve(route) 来在 entry 中引入具体路径的文件。该方法只是用来作为路径模块的搜索,其返回的是指定文件的绝对路径名。解析机制有点类似,require(route)

    entry: [
        require.resolve('react-dev-utils/webpackHotDevClient'),
        require.resolve('./polyfills'), //返回 /Users/villainHR/Desktop/file/polyfills/index.js
        require.resolve('react-error-overlay'),
        'src/index.js'
      ],

    entry 还可以接受 function 返回的 string,array,object 值:

    entry: () => './demo'

    context 上下文基础目录

    context 用来设置 entry 和 loaders 的上下文索引依赖。默认情况下,entry 等参考的是当前目录(CWD)

    // 手动设置
    context: path.resolve(__dirname, "app")

    通过,entry 设置的相对路径,会优先寻找 ./app 路径下的文件。

    output-输出 JS 配置

    基础配置项

    output 里面又很多基本的配置项,基础配置项有:

    output:{
            path: path.join(__dirname,'./dist'),
            filename:'js/bundle-[name]-[hash].js',
            chunkFilename:'js/[name].chunk.js',
            chunkLoadTimeout: 12000,
            publicPath:'/dist/'
        }
    • path: 用来决定输出目录。通常结合 path.join/resolve() 设置绝对路径。
    • filename[alias: name]: 决定具体输出的文件名,上面 output 选项中,可以用到很多全局的占位符,比如:name、[hash] 等。
    • chunkFilename: 主要是用来对没在 entry 中定义的文件来设定具体的输出目录和文字的。常常用来按需的异步加载当中,例如:
    require.ensure(["modules/tips.jsx"], function(require) {
        var a = require("modules/tips.jsx");
        // ...
    }, 'tips');

    这里,chunkFilename 就可以将 tips.jsx 具体输出为 js/tips.chunk.js。

    • publicPath:并不是用来输出打包路径,而是在 runtime 的时候,手动修改 src 引用路径的。常常配合 css/style/html-loader 来修改。例如,会将: src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg" 。相当于,手动修改请求 url 的地址。
    • chunkLoadTimeout[Number]: 设置 webpack chunk 的请求超时时间。// TODO

    上面也提到了,在 output 中会存在一起全局占位符,比如::name、[hash] 等。代表的含义为:

    • [id]:webpack给块分配的内部chunk id,如果你没有隐藏,你能在打包后的命令行中看到;
    • [hash]:每次构建过程中,生成的唯一 hash 值;(每次都变)
    • [chunkhash]: 依据于打包生成文件内容的 hash 值,内容不变,值不变;

    hash 控制

    在全局占位符中,有一个特殊的值 [hash]。我们可以在 webpack 中,针对 hash 输出做相关的控制。(这里会一并影响到 [chunkhash])

    • output.hashDigest: 具体输出 hash 的 encoding,有 ‘hex’, ‘latin1’ or ‘base64’。默认为 hex
    • output.hashDigestLength: 输出 hash 具体长度。默认为 20。
    • output.hashFunction: 引入文件的具体算法,默认为 md5。
    • output.hashSalt: 给 hash 加盐,很少用。

    如果,有使用 ExtractTextWebpackPlugin 的话,它会通过 contenthash 选项,直接覆盖上面 4 个的 hash 选项。

    自定义库的打包

    在 webpack 中,如果想要自己写一个包并发布的话,就需要独立打包成为一个 library。这里,在 webpack 中有指定的配置项,和我们平常写的 webpack 打包项目不同。

    独立打包一个库,常常会遇到应用外部库的事情,你可以选择大伯啊,也可以选择不打包。这里,除了 output 选项之外,还需要 externals 选项。下面内容主要对 output 里面内容做详解解释,而 externals 会放到后面进行讲解。

    externals 主要是用来解决外部库打包问题,基本设置为:

    externals: {
        key: "value"
      },
    • value: 用来指明 外部库 通过全局(window,global)的方式暴露的模块名。例如:
    window.jQuery = {
      //xxx
    }

    webapck 会直接处理 window 或者 global 对象进行模块化包裹。否则,则不会对指定模块进行 externals 处理。这点非常关键。

    • key: 具体指代,在经过 value 处理过后的外部库,能够在 webpack 通过 require 或者 import 的包名,例如:
    externals: {
        $: "jQuery"
      }
      
    // index.js
    
    var $ = require("$");

    在 output 中主要有 4 个关键选项设置值:

    • output.library[String]: 用来设置通过,CDN 引入时的全局 Name。对于,require/import 引入的没影响(模块引入具体是根据具体代码中的 exports 来决定)
    • output.libraryExport: 限定通过模块具体暴露的接口。例如:
    libraryExport: ["MyModule", "MySubModule"]; // 只能到处前面两个模块

    最重要的模块输出选项应该是 libraryTarget ,它是用来决定模块以何种规范输出,在全局变量的 Name 是啥。其基本格式为:

    output.libraryTarget[String]: var | assign | this | window | global | commonjs | commonjs2 | amd | umd

    上面那些全部是都是可选项值。这里先告诉大家,在现代 JS 的写法中,最后一个 umd 的选项是最常用的。如果你还是想通过 script 标签引入的话,则前面 5 个比较适合给你灵活自定义。当然, umd 选项也是适合的,不过灵活性差了点。

    上面选项可以分为三种类型:

    • 全局变量型[var,assign]:用来表示模块导出,是直接在全局中定义变量。比如,jQuery 的 $,不需要额外引入处理。
    • 对象绑定型[this,window,global,commonjs]:用来将导出的模块,绑定到具体的对象中。比如,jQuery 的 window[’$’],this[’$’] 这样的引入绑定。
    • 模块绑定型[commonjs2,amd,umd]: 需要通过,全局 require() 方法引入的模块。

    libraryTarget 常常和 library 选项一起结合使用。下面内容,统一 library 设置为 Villainhr :

    output.library: 'Villainhr'

    接下来,我们具体一个一个来细分讲解一下:

    全局变量型

    var

    output.libraryTarget: 'var' // 默认值

    在 js 脚本实际编译结果为:

    var Villainhr = _entry_return_;
    
    // In a separate script...
    Villainhr.doSomething();

    通过 var 变量定义关键字来申明一个变量,将导出的模块直接复制过去。

    assign

    output.libraryTarget: assign

    编译结果为:

    Villainhr = _entry_return_;
    
    // In a separate script...
    Villainhr.doSomething();

    这里,就直接全局绑定,如果前面已经定义过 Villainhr 则会默认覆盖。其实和 var 定义没啥区别。

    对象绑定型

    对象绑定则是直接通过 Object 的方法,将导出的模块直接绑定到具体对象:

    this

    output.libraryTarget: "this"

    编译结果为:

    this["Villainhr"] = _entry_return_;
    
    // In a separate script...
    this.Villainhr.doSomething();
    Villainhr.doSomething(); // if this is window

    导出的模块,直接绑定在 this 上,在全局中直接使用 this.xxx 来进行模块调用。

    window

    output.libraryTarget: "window"

    编译结果为:

    window["Villainhr"] = _entry_return_;
    
    window.Villainhr.doSomething();
    // or
    Villainhr.doSomething();

    这里就是通常的导出方案,直接将输出模块绑定到 window 对象上。其实也相当于 var 绑定,直接通过模块名使用。

    global

    output.libraryTarget: "global"

    编译结果为:

    global["Villainhr"] = _entry_return_;

    直接通过 global 对象调用,这个通常用在 NodeJS 的环境。

    commonjs

    output.libraryTarget: "commonjs"

    编译结果为:

    exports["Villainhr"] = _entry_return_;
    
    require("Villainhr").doSomething();

    在引用调用时,直接通过 require() 方法引入。

    模块绑定型

    模块绑定型有 commonjs2,amd,umd 这三个选项。他们具体的规范就是根据选项值对应的规范来的—— CommonJS , AMD 。

    commonjs2

    编译结果为:

    module.exports = _entry_return_;

    这和 commonjs 类似,不过遵循的是 commonjs2 的规范,是直接将其赋值到 module.exports 上的。具体使用还是需要 require() 引用:

    require("Villainhr").doSomething();

    amd

    编译结果为:

    define("Villainhr", [], function() {
      // main body
    });

    这里通过 amd 异步加载的规范,来导出具体的文件模块。具体使用是通过 require 方法直接引入使用:

    require(['Villainhr'], function(Villainhr) {
      // xxx
    });

    umd

    这个模块标准应该属于最方便的一种,它实际上集合了 commonjs1/2,amd,this 的绑定方式。具体编译结果为:

    (function webpackUniversalModuleDefinition(root, factory) {
      if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
      else if(typeof define === 'function' && define.amd)
        define([], factory);
      else if(typeof exports === 'object')
        exports["Villainhr"] = factory();
      else
        root["Villainhr"] = factory();
    })(this, function() {
      //what this module returns is what your entry chunk returns
    });

    这里其实一共有 4 个绑定,不过它会优先进行绑定选择,具体顺序是:

    commonjs2 > AMD > commonjs > this

    也就是 4 选一,如果已经通过 commonjs2 引入的话,则不能在通过其它方式使用。比如,this.Villainhr 这样是访问不到的。

    module 编译设置

    在 module 选项主要就是用设置 webpack 中常用的 loaders。通过 rules 规则来匹配具体应用的文件和 loaders。

    noParse 防止预编译

    noParse 主要用来设置相关的匹配规则,来防止 webpack loaders 对某些文件进行预编译。

    基本设置为:

    noParse: RegExp | [RegExp] | function
    

    通常,设置的值可以直接为:

    noParse: /jquery|lodash/
    
    // or
    
    noParse: function(content) {
      return /jquery|lodash/.test(content);
    }

    这样,jquery 和 loadsh 就不会被 webpack 中的 loaders 捕获并编译了。

    rules 设置匹配规则

    module.rules 的选项具体是用来设置 loaders 匹配文件的规则。其基本接受类型为 [Array]。

    module: {
        rules: [{
          test: /\.js$/,
          exclude: /node_modules\/dist/,
          loader: 'babel-loader'
        }]
      },

    rules 里面的每个对象都决定了 loaders 的具体类型以及 loaders 作用的具体文件。在 webpack3 中,继承了 webpack2 的基本限定功能,比如 exclude 、 include 等,还额外加入了通过 query 匹配,以及多个 query 的 loader 匹配规则。

    文件匹配

    在每一条具体的 rule 里面,用来进行匹配文件的选项有:Rule.test, Rule.exclude, Rule.include, Rule.and, Rule.or, Rule.not。

    上面三个对象其实挂载到的是 Rule.resource 对象上的,你可以直接写到 Rule 上,也可以写到 Rule.resource 上。这里简单起见,以 rule 为基准。他们的值统一都为 condition 。这个概念,是 webpack 匹配文件提出的。

    condition

    主要用来设置匹配文件的条件规则。可接受的值有:

    condition:  [string | RegExp | function | array | object]
    
    • string: 匹配文件的绝对路径
    • RegExp: 匹配文件的正则
    • function: 参数为 input 的路径,根据返回的 boolean 来决定是否匹配。
    • array: 里面可以传入多个 condition 匹配规则。
    • object: 不常用,用来匹配 key。

    接下来,我们来看一下 condition 在各个选项值中的具体实践。

    test

    test 用来匹配符合条件的 input。设置的值为:

    test: [condition]

    最常用的还是直接写入正则:

    test: /\.jsx$/

    include

    和 test 一样,也是用来匹配符合条件的 input,主要用途是用来设置 依赖文件索引目录。在 include 中,通常设置 string 或者 array of strings。

    // 在 entry css 文件中,只能在 app/styles 以及 vendor/styles 中索引依赖文件
    {
      test: /\.css$/,
      include: [
        path.resolve(__dirname, "app/styles"),
        path.resolve(__dirname, "vendor/styles")
      ]
    }

    exclude

    设置依赖文件不会存在的目录。

    实际上,上面三个命令是一起配合来提高编译速度的。因为默认情况下,webpack loaders 会对所有引入的文件进行 loader 编译,当然,对于 node_modules 里面成熟的库,我们没比较在进行额外的 loader 编译,直接将其 bundle 即可。

    常用设置可以为:

    test: /\.js$/,
    loader: 'babel-loader',
    include: [
        path.resolve(__dirname, "app/src"),
        path.resolve(__dirname, "app/test")
    ],
    exclude: /node_modules/ // 排除编译 node_modules 中的文件

    剩下的 or 和 not 也是用来设置规则,根据名字大家也可以猜出这两者的含义:

    • or[condition]:满足其中一种条件即可。例如: or: [/.*src\/index.*/,/.*abc.*/]
    • not[condition]:都不满足所有的条件。设置方法同上

    query 匹配

    query 匹配具体指的是匹配 url 中的 ? 后的字符串。当然,我们也可以在 test 中通过正则来写,不过,webpack3 既然已经提供了 query 的选项,我们也可以直接使用它的配置– resourceQuery 。

    resourceQuery 用来设置匹配 query 的规则,接受的内容是 condition 。不过,一般直接设置 正则 或者 string 就行:

    // 匹配 query 含有 inline 的路径,例如:./villainhr.css?inline 
    {
      test: /.css$/,
      resourceQuery: /inline/,
      use: 'url-loader'
    }

    另外,如果你想对不同的 query 使用不同的 loader 话,可以直接使用 oneOf 配置。文件资源会默认找到 oneOf 中第一个匹配规则,来调用对应的 loader 处理。

    {
      test: /.css$/,
      oneOf: [
        {
          resourceQuery: /inline/, // villainHR.css?inline
          use: 'url-loader'
        },
        {
          resourceQuery: /external/, // villainHR.css?external
          use: 'file-loader'
        }
      ]
    }

    loader 编译设置

    在 webpack2 的时候,主要写法是根据 loaders 和 loader 来进行设定的。不过,在 webpack3 该为根据文件来决定 loader 的加载。这其中,最大的特点就是,将 loaders 替换为了 rules。例如:

    module: {
        loaders: [
          {test: /\.css$/, loader: 'style-loader!css-loader'}
        ]
      }
    
    // 替换为:
    
    module: {
        rules: [
          {
            test: /\.css$/, use:[
            'style-loader','css-loader'
          ]}
        ]
      }

    按照规范, use 是用来实际引入 loader 的标签。在 webpack3 时代,还保留了 loader 字段,废除了 query 字段,其实可以在 use 中找到替代。

    loader

    用来定义具体使用的 loader,这里等同于: use:[loader]。

    query

    用来限定具体的 loader 使用的配置参数,例如 babel 的配置:

    test: /\.js$/,
    loader: 'babel-loader',
    query: {
        presets: ['es2015']
    }

    不过,在 webpack3 中已经废弃了 query,使用 use 中 options 选项:

    test: /\.js$/,
    use:[
       {
            loader: 'babel-loader',
            options:{
                presets: ['es2015']
            }
       }
    ]

    resolve 模块解析路径

    resolve 主要是用来解析具体入口文件中,引入依赖文件解析。例如,通过 import / require引入的文件:

    import foo from 'demo/test/villainhr.js')
    // or
    require('demo/test/villainhr.js')

    在 webpack 中,提供了 3 种路径解析方式:

    • 相对路径:直接根据入口文件的路径,来对路径进行解析。相当于 path.resolve() 这个方法。
    import "../src/villainhr.js"; // 等同于 path.resolve(__dirname,'../src/villainhr.js')
    • 绝对路径:根据 resolve.modules 设置的参考目录来进行解析。默认是根据 webpack 所在的目录。设置了之后,绝对路径的解析,只会在设置的参考目录中查找。
    modules: [path.resolve(__dirname, "src"), "node_modules"] // 设置绝对路径搜索目录
    
    import "/villainhr.js"; // 只会搜索 src/villainhr.js 以及 node_modules/villain.js 。
    • 模块路径:直接引入模块,路径前面不加任何修饰符号。例如: import "es5"; 。webpack 的模块解析规则比上面两个规则要复杂一点。因为还牵扯到 modules 、 alias 、 extensions 等。主要规则为:
      • 搜索 resolve.modules 定义的目录,如果有 alias 标签,则还会参考 alias 定义的模块路径
      • 检查引用的路径是文件
        • 检查文件是否存在,如果没有尾缀,则根据 resolve.extensions 定义的尾缀来索引。
      • 检查引用的路径是目录
        • 检查含有 package.json,根据 resolve.mainFields 定义的字段来索引文件。
        • 如果不含有 package.json,直接根据 resolve.mainFiles 来索引文件。
        • 具体文件解析,根据 resolve.extensions 来解决。

    具体模块路径解析,可以参考如下:

    # /src/villain.js 存在
    import VR from 'villain'; 
        /** 搜索 /src、node_modules 目录,
            找到 villain 文件,如果没有,
            根据 extensions 添加尾缀查询。
            找到 villain.js
        */
            
    # node_modules/es6 模块存在
    import VR from 'es6';
        /** 搜索 /src、node_modules 目录,
            找到 es6 文件夹
            查看 package.json 文件,
            根据 mainFields 定义的字段索引 packjson,找到 main 字段定义的文件。
        */
        
    # src/demo/dev/index.js 存在
    import VR from 'ABC/dev';
         /** 根据 alias 定义的 ABC 查找,src/demo/ 目录下的文件
             找到 dev 目录,里面没有 package.json 文件
             根据 mainFiles 定义的文件名和 extensions 定义的尾缀找到 index.js 文件
             
    
    // webpack.config.js
     resolve:{
            alias: {
                ABC: path.resolve(__dirname, 'src/demo/')
              },
            modules: [path.resolve(__dirname, "src"), "node_modules"],
            mainFields: ["main"],
            mainFiles: ["index"],
            extensions: [".js", ".json"]
        }
    

    设置模块索引目录

    在 webpack 中,主要提供 alias 和 modules 来进行索引目录的设置。

    • alias:设置导入路径的简便写法。如果你有大量的文件依赖路径非常长的话,除了使用 modules 设置参考路径之外,还可以根据 alias 来设置路径映射的 key。另外,它还提供了 $ 来进行文件的精确匹配,这个看看 文档 就行,感觉不常用。例如:
    alias: {
      Villainhr: path.resolve(__dirname, 'src/Villainhr/')
    }
    
    # 如果要获取 src/Villainhr/index.js 的话,可以直接在 import 写入:
    
    import test from 'Villainhr/index';
    • modules: 用来设置模块解析的目录。这样,在进行模块查找的时候,webpack 会优先遍历你定义的目录。如果,你还有自定义模块在 src 目录下,通过普通模块解析是找不到的,这时候可以直接在 modules 中添加 src。
    modules: [path.resolve(__dirname, "src"), "node_modules"]

    package.json 索引解析

    和模块搜索最关键的文件是 package.json 、在 node 环境下,如果模块文件中存在 package.json,会根据其 main 字段定义的文件来进行索引。通过 webpack 设定的模块索引,可以更灵活的设置查找规则。其中,主要依赖的是 mainFields 、 mainFiles 、 extensions 这三个字段。

    • mainFields[Array]: 接受的是数组,用来设置在 package.json 文件中,用来定义具体查找文件的字段。例如: mainFields: ["browser", "module", "main"] ,则会按顺序搜索: browser 、 module 、 main 这三个字段。
    • mainFiles[Array]:如果文件不含有 package.json,则直接根据 mainFiles 定义的文件来索引。
    • extensions[Array]:设置默认文件后缀名。当索引文件时,如果具体路径没带文件名的话,会根据 exntensions 定义的内容来获取。

    loader 简便书写

    在 modules 指令下,添加具体调用的 loader 一定需要带上后面的 -loader 尾缀。如果你不想带,则会默认报错。不想报错的话,可以使用 moduleExtensions 指令来说明:

    moduleExtensions: ['-loader']

    这样,就可以直接在 module 中直接不带 -loader 引用:

    loader: 'eslint'

    externals 定义外部依赖

    externals 是用来排除某些你并不想打包的库,并且可以通过 import / require 在全局环境中调用。这个选项一般是提供给一些开源库或者组件作者使用的。

    相当于,你调用了一个库,而最终实际打包的文件里面剔除该库的存在,只是留下了一个引用接口。

    // 剔除 sw-router 库
    externals: {
      Router: 'sw-router'
    }
    
    // 在代码中使用
    import Router from 'Router';

    它可以接收如下类型:(array object function regex)

    • array:用来过滤打包文件中的子模块。
    // 将 ./math 文件中的 subtract 过滤不打包。
    externals: {
      subtract: ['./math', 'subtract']
    }
    
    // 忽略如下文件打包:
    import {subtract} from './math';
    • object:通过 key 值,来决定在不同模块规范下,文件暴露的接口名。其中,commonjs 代表 require 模块规则,amd 则代表 define 模块规则,root 则是代表该模块在全局环境,例如 window 访问的对象名。
    externals : {
      ex_loadsh : {
        commonjs: "lodash", // require('loadsh')
        amd: "lodash",  // define(['loadsh'])
        root: "_" // window._
      }
    }

    通过 externals 定义之后,我们在不同环境访问 loadsh 的方式就变为:

    // 全局环境
    window.ex_loadsh;
    
    // 模块包中
    require('ex_loadsh');
    • function: 前面几个写法都是将需要提出的文件写死,而 function 提供了可以灵活配置的 external list。比如,你想剔除所有 node_modules 包中的库,而里面又有几个包需要引用的话,可以写为:
    externals: [
      function(context, request, callback) {
        if (/^yourregex$/.test(request)){ // 剔除具体的包
          return callback(null, 'amd ' + request);  // 通过 amd 定义剔除文件的引用方式
        }
        callback(); 
      }
    ]

    不过,更方便的直接使用 webpack-node-externals 来完成。如果项目不是特别复杂,这个配置选项一般用不上。

    • regexp: 使用正则选项,相当于就是通过正则的 test 方法,通过路径名的检查,来决定是否剔除。
    externals: /^(jquery|\$)$/i; //剔除 jquery 和 $ 文件导入
    
    # 剔除如下文件
    import $ from 'jquery';
    // or
    import $ from '$';

    target 设定打包环境

    这里,如果项目并不复杂的话,可以直接忽略该属性设置

    因为 webpack 本身都是多环境应用,你可以在 node、web、webworker 甚至其他跨平台环境中:node-webkit、electron-main。其常用选项有三个:

    • node:在后台环境中使用
    • web:在浏览器主线程环境中使用
    • webworker:在 web-worker 环境中使用

    具体设置方式为:

    {
      target: 'node'
    }

    不过,该选项常常用于复杂的打包项目中。比如,一个项目你需要同时输出在 web 环境中和在 webworker 环境中运行的打包脚本文件。这时候,就涉及到多入口文件的 webpack.config.js 设置。这里,可以利用 webpack-merge 来帮助我们完成多入口的合并设置。

    var baseConfig = {  
      target: 'async-node',
      entry: {
        entry: './entry.js'
      },
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './dist')
      }
    };
    
    let targets = ['web', 'webworker', 'node', 'async-node', 'node-webkit', 'electron-main'].map((target) => {
      let base = webpackMerge(baseConfig, {
        target: target,
        output: {
          path: path.resolve(__dirname, './dist/' + target),
          filename: '[name].' + target + '.js'
        }
      });
      return base;
    });
    
    module.exports = targets;

    在导出的就会同时编译出 web、webworker、node 等目录,里面的文件就是对应环境中使用的包。如果想用原生的可以直接导出,数组形式的配置项:

    var path = require('path');
    var serverConfig = {
      target: 'node',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'lib.node.js'
      }
    };
    
    var clientConfig = {
      target: 'web', // <=== can be omitted as default is 'web'
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'lib.js'
      }
    };
    
    module.exports = [ serverConfig, clientConfig ];

    通过,在 webpack 主文件中,具体设置需要使用的配置,即可完成指定环境的编译操作。

    node 提供模拟包

    node 指令主要是让 webpack 将在 node 环境运行的包,提供相关的设置,能够直接在打包文件中访问。其策略可以是提供一个桩(空对象),或者直接将现成的包直接打进去。

    其基本可选择的值主要是直接参考 node 的模块包名:

    console
    global
    process
    __filename
    __dirname
    Buffer
    setImmediate

    不过,主要用到的还是 Buffer 和 global 两个配置项。其打包策略选项有 4 个值:

    • true: 直接将该包的 polyfill 直接打进去
    • “mock”: 提供空接口。可以访问对应的接口名,但是没有任何作用。
    • “empty”: 提供一个空对象。这个连接口名都不能访问
    • false: 啥都没有。

    上述默认配置值为:

    node: {
      console: false,
      global: true,
      process: true,
      __filename: "mock",
      __dirname: "mock",
      Buffer: true,
      setImmediate: true
    }

    这样设置了之后,我们可以直接在主文件入口中访问:

    const Buffer = require('Buffer');
    
    // doSth()

    如果你想啥都不提供,最好直接将 node 设置为 false 。

    node:false

    devtool 开启 sourceMap 选项

    devtool 主要是给 JS 文件添加对一个的 sourceMap 文件。不过,webpack 可以生成多种 sourceMap 文件,具体的区别是,映射还原度的区别。这里直接参考 webpack 官方文档即可。

    其中,最常用的选项就是 source-map 和 cheap-eval-source-map 。(这里实在太多了,各位看着选个合适的就行)如果你想关闭,sourceMap 的话,可以直接使用 hidden-source-map,或者不传。比如,下面的配置:

    if (COMPILE) {
        config.devtool = 'hidden-source-map';
        config.output.path = path.join(__dirname,'public');
    }

    devServer 本地 localhost 调试

    devServer 是 webpack 提供一个简便的调试服务。它可以根据字段配置,自动起一个 server 来进行调试。如果用过 webpack-dev-server 的同学,应该就很熟悉了。那如果利用 webpack,起一个简单的 server 服务呢?这里,直接给一份配置即可:

    devServer: {
      contentBase: path.join(__dirname, "dist"), // 设置静态资源访问路径
      compress: true, // 执行压缩
      port: 9000 // 监听的端口
    }

    不过,更常用的是利用 webpack server 的热更新机制。配置列表为:

    devServer: {
      contentBase: path.join(__dirname, "dist"),
      compress: true,
      port: 9000,
      hot: true,
      hotOnly: true
    }

    接着,你就可以通过 localhost:9000 来访问你编译过后的目录。

    剩下 server 配置,大家可以直接参考 webpack devServer 。

    最后说几句

    到这里,webpack 3.x 的整个内容差不多已经阐述完了。不过,关于 plugin 的内容,我们这里并没有过多提及,因为,对于一般 webpack 纯使用者来说,直接使用现有成熟的 plugin 即可。还有一个原因是,webpack plugin 内容真的有点多,这里篇幅有限就不写了。后面专门针对其内容详述一篇。


    转载https://www.tuicool.com/articles/7Bj6VbY

    展开全文
  • webpack4搭建多页面脚手架(一)

    千次阅读 2018-06-22 17:08:42
    开始的开始步入前端已经一年多了,真心的体会到前端世界变化莫测,从jquery到vue,也算经历了一场大前端的变革。而在这几年,webapck的呼声越来越高。远超gulp,grunt等打包工具。平时使用vue-cli时用得biu顺,等到...

    开始的开始

    步入前端已经一年多了,真心的体会到前端世界变化莫测,从jquery到vue,也算经历了一场大前端的变革。而在这几年,webapck的呼声越来越高。远超gulp,grunt等打包工具。平时使用vue-cli时用得biu顺,等到自己搭的时候就有点捉襟见肘了。(本次使用的是webpack4以上,小心踩坑,注意脚下)

    叼程序,老子不编了!

    项目的初始化

    使用npm init进行初始化操作 ,初始化界面会要求你输入对应的配置信息

    package name: (demo-cli-blog)  //项目包名
    version: (1.0.0)        //项目的版本
    description: test       //项目的具体描述
    entry point: (index.js) //项目的入口文件
    test command:           //测试指令,默认为test
    git repository:         //git的地址
    keywords:               //关键词
    author: talen           //作者信息
    license: (ISC)          //证书号

    填写完成后,文件目录里多出了一个json文件package.json

    {
      "name": "demo-cli-blog",
      "version": "1.0.0",
      "description": "test",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "talen",
      "license": "ISC"
    }

    建立基本目录

    demo-cli-blog文件下建立如下目录:

    安装webpack

    目录搭建完成后就开始安装webpack,(截止博客完成,webpack最新版本为4.6.0)。 
    首先,确认你是否安装过全局webpack,在命令提示板使用 webpack -v可以查看当前webpack的版本信息。 
     

    如果查询不到,就说明你可能没安装webpack全局环境,通过npm安装webpack

    npm install webpack -g

    同时webpack 4以上还需要安装webpack-cli(可以帮你拉取配置,过渡版本迁移)

    npm install webpack-cli -g

    安装完webpack和webpack-cli后,就可以开始配置webpack.config.js文件了。

    配置webpack文件

    • 首先配置入口文件和出口文件
    const config= {
      entry: {                        //入口文件(这是多页面配置)
    
          a:'./src/page1/a.js',   //index页面入口
          b:'./src/page2/b.js'   //page1页面入口
    
    
      },
      output: {                               //出口文件配置
          filename: './[name]/[name].js',     //出口文件存放位置,[name]代表块级文件流的名字,如入口文件中的a,b,最终会[name]的值就会变成a,b。目的是为了让每个页面在其单独的文件夹内
          path: path.resolve(__dirname, 'dist'), // 新建dist文件夹存放的位置,__dirname表示当前环境下的绝对路径
      },
    • 出口和入口文件配置完毕后,配置打包需要的插件和loader,在此之前应该使用npm管理工具在当前目录下安装这些插件和loader。比如:webpack,webpack-cli(当前目录也需要安装webpack,webpack-cli),html-webpack-plugin,extract-text-webpack-plugin,'clean-webpack-plugin,style-loader,css-loader,url-loader,file-loader,html-loader等等(插件安装所需包请自行百度,谷歌)……

    注意: 

    1、注意在webpack4.6.0里面 `extract-text-webpack-plugin`由于版本支持的问题,会报

    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead  错误,

    所以需要 ` npm install -s extract-text-webpack-plugin@next`安装与webpack4以上适应的版本,或者可以使用`mini-css-extract-plugin`。 

    2、 webpack只会到打包js文件,所以css需要引入js才能打包 

    webpack.config.js全部代码

    const path = require('path');//引入node中的path模块
    const webpack = require("webpack");//引入webpack
    const HtmlWebpackPlugin = require("html-webpack-plugin");//引入html-webpack-plugin插件,作用是添加模板到编译完成后的dist的文件里面
    const CleanWebpackPlugin = require("clean-webpack-plugin");//引入clean-webpack-plugin插件,作用是清除dist文件及下的内容,因为每次编译完成后都会有一个dist文件夹存放静态文件,所以需要清除上次的dist文件
    const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");//引入extract-text-webpack-plugin插件,作用是把css文件单独存为一个文件,如果不用插件,css会以style标签的方式插入html中
    
    
    const config= {
      entry: {                        //入口文件(这是多页面配置)
    
          a:'./src/page1/a.js',   //index页面入口
          b:'./src/page2/b.js'   //page1页面入口
    
    
      },
      output: {                               //出口文件配置
          filename: './[name]/[name].js',     //出口文件存放位置,[name]代表块级文件流的名字,如入口文件中的a,b,最终会[name]的值就会变成a,b。目的是为了让每个页面在其单独的文件夹内
          path: path.resolve(__dirname, 'dist'), // 新建dist文件夹存放的位置,__dirname表示当前环境下的绝对路径
      },
    
    
    
      plugins:[                                   //webpack插件部分
    
          //分割css插件
          new ExtractTextWebpackPlugin({
    
              filename:"[name]/[name].css",//制定编译后的目录
              allChunks:true,//把分割的块分别打包
    
          }),
    
          //配置html模板,因为是多页面,所以需配置多个模板
          new HtmlWebpackPlugin({
    
              title:'测试',//html标题
              filename:'./a/a.html',//文件目录名
              template:'./src/page1/a.html',//文件模板目录
              hash:true,//是否添加hash值
              chunks:['a'],//模板需要引用的js块,vendors是定义的公共块,index是引用的自己编写的块
    
          }),
    
          new HtmlWebpackPlugin({
    
              title:'页面一',
              filename:'./b/b.html',
              template:'./src/page2/b.html',
              hash:true,
              chunks:['b'],
    
          }),
    
    
          // 每次清空dist目录
          new CleanWebpackPlugin(['dist']),
    
      ],
    
      module:{
    
          rules:[
    
              {test:/\.css/,use:ExtractTextWebpackPlugin.extract({use:['css-loader']},)},//带css的css编译
              {test:/\.scss/,use:ExtractTextWebpackPlugin.extract({fallback:"style-loader",use:['css-loader','sass-loader']},)},//带scss的css编译
              {test:/\.(svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/,use:[{loader:'file-loader',options: {outputPath: 'assets/'}}]},//图片和字体加载
              {test: /\.png$/, use: {loader:"url-loader",options:{mimetype:"image/png",limit:"4096"}}},//如果有png格式的图片,超过4M直接转化为base64格式
              {test: /\.html$/, use: {loader:'html-loader',  options: {           //打包html文件
                          minimize: true, //是否打包为最小值
                          removeComments: true,//是否移除注释
                          collapseWhitespace: true,//是否合并空格
                      }}},
    
    
          ],
    
    
      },
    
    
    };
    
    
    module.exports = config

    打包后目录如下:

    直接访问dist目录效果

    第一次webpack的尝试就到此为止,敬请期待。。。


    展开全文
  • Webpack 命令行参数详解

    千次阅读 2018-08-20 16:50:24
    很多小伙伴在每次用到package.json中的npm scripts时,总是被里面的各种命令行参数搞得头大。本文将针对webpack,对其命令行参数进行详解,希望读者们能借此搞清楚每个参数的作用,并在使用时能知道其含义。...
  • 在vue项目中配置webpack

    千次阅读 2019-05-19 13:54:41
    Webpack在vue项目中的配置 1.使用webpack的必要性 在刚接触 webpack 的时候一直觉得这个打包工具是个可有可无的东西,不仅要写许多的配置代码,还要安装各种插件来使用。后来接触的次数多了,觉得如果没有 webpack ...
  • 一般情况下,我们不用担心所使用的第三方库,在npm...然后,在使用jquery的模块文件中,通过import $ from 'jquery'或者var $ = require('jquery')来引入。 这是常用的在webpack构建的项目中引入第三方库的方式。...
  • webpack3总结笔记

    千次阅读 2018-01-02 18:50:00
    webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代,让很多同学在学一个版本的时候,下一个新版本就发布了,让人感觉非常蛋疼和无奈:“我是谁,我在干嘛,我要做什么?”不过,如果你已经掌握 ...
  • webpack学习笔记

    千次阅读 2015-08-02 17:07:51
    是什么webpack是一个模块打包工具,通过依赖处理模块,并生成那些模块静态资源。 观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css中可以嵌入图片dataUrl,对于不同...
  • Vue 知识点汇总(下)--附案例代码及项目地址

    千次阅读 多人点赞 2020-01-14 01:53:43
    文章目录Vue预备知识与后续知识及项目案例一、简介1.Vue (读音 /vjuː/,类似于 view)的简单认识2.Vue.js安装二、Vue知识量化三、内容1、Webpack 详解什么是Webpack?前端模块化**和grunt/gulp的对比**webpack安装...
  • vue-cli项目结构详解

    万次阅读 多人点赞 2017-12-26 17:06:21
    Vue-cli是vue官方出品的快速构建单页应用的脚手架,如果你是初次尝试Vue,不建议使用,推荐你使用普通引入javascript文件的方式进行学习,如果你已经有vue基础那么就可以用vue-cli这个脚手架进行学习。...
  • 一篇就让你学会webpack4

    千次阅读 2018-05-15 09:44:19
    webpack 是一个现代 JavaScript 应用程序的静态模块打包器,目前最流行的打包神器,接下来聊一下webpack4首先webpack4要求node版本在8.5以上,cmd中node -v查看node版本。1.什么是webpackWebPack可以看做是模块打包...
  • webpack 从入门到工程实践

    千次阅读 2017-10-16 11:39:37
    GitChat 作者:张旺 关注微信公众号:GitChat 技术杂谈 ,一本正经的讲技术 本文的初衷是和你一起理清`webpack`的使用逻辑,以便能更加容易的编写及拓展自己项目所需的配置文件。不过也得提前说明本文可能并不是一...
  • vue基于webpack 模板的目录结构以及目录作用的解析

    千次阅读 多人点赞 2018-01-03 14:57:03
    一个vue目录建好如下: 1.build 2.config 3.node_modules 4.src 5.static 6.babelrc babelrc文件是babel的配置文件 主要适用于编译es6转义为es5 一般用2个插件es2015,stage-2,transfer-..."comments": false
  • 一篇弄懂webpack静态资源打包器

    千次阅读 2020-10-01 16:48:38
    认识 webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 规约 入口文件: 开始打包第一个文件称为入口文件,通常经过在入口...
  • webpack面试部分

    千次阅读 多人点赞 2019-01-18 11:53:42
    Webpack面试问题 1、webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 2、webpack的优势 (1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面...
  • webpack系统配置

    千次阅读 2019-01-20 23:15:54
    简言之,webpack 是一个模块...首先,定义已经说明了 webpack 能将多个资源模块打包成一个或少数文件,这意味着与以往的发起多个 HTTP 请求来获得资源相比,现在只需要发起少量的 HTTP 请求。 其次,webpack 能将你...
  • webpack4.0打包总结

    千次阅读 2018-06-04 12:01:52
    1.webpack概念WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。...
  • Webpack性能优化

    千次阅读 2019-08-27 11:09:54
    Webpack是现在主流的功能强大的模块化打包工具,在使用Webpack时,如果不注意性能优化,有非常大的可能会产生性能问题,性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等,...
  • webpack配置

    2017-11-08 18:12:23
    或者npm install webpack –save-dev进行全局和本地安装。 安装指定版本,运行命令npm install webpack@1.12.x --save-dev 如果需要使用webpack开发工具,请自行安装npm install webpack-dev-server
1 2 3 4 5 ... 8
收藏数 155
精华内容 62
关键字:

webapck 全局定义jquery