一、概念:

1、webpack的核心是用于现代JavaScript应用程序的静态模块捆绑器。当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个

  • Entry
  • Output
  • Loaders
  • Plugins

  • Entry

一个入口点指示哪个模块的WebPack应该使用开始建立了其内部的依赖关系图。webpack将确定入口点所依赖的其他模块和库(直接和间接)。

默认情况下,其值为./src/index.js,但您可以通过在webpack配置中配置entry属性来指定不同的(或多个入口点)。例如:

webpack.config.js

module.exports = {
entry: './path/to/my/entry/file.js'
};

Output

该输出属性告诉的WebPack哪里发出它创建以及如何命名这些文件。它默认./dist/main.js为主输出文件和./dist任何其他生成文件的文件夹。

您可以通过output在配置中指定字段来配置此过程的这一部分:

webpack.config.js

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

Loaders

开箱即用,webpack只能理解JavaScript文件。装载机允许的WebPack处理其他类型的文件,并将其转换为有效的模块,可以通过您的应用程序消耗并添加到依赖关系图。

请注意,import任何类型的模块(例如.css文件)的功能都是特定于webpack的功能,其他捆绑器或任务运行器可能不支持。我们认为这种语言的扩展是有保证的,因为它允许开发人员构建更准确的依赖图。

在较高级别,加载器在您的webpack配置中有两个属性:

  1. test属性标识应转换的文件。
  2. use属性指示应使用哪个加载程序进行转换。

webpack.config.js

const path = require('path');

module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};

上面的配置rules为具有两个必需属性的单个模块定义了一个属性:testuse。这告诉webpack的编译器如下:

“嘿webpack编译器,当你遇到解析为require()importstatement语句中'.txt'文件的路径时,在将它添加到bundle之前使用它raw-loader来转换它。”

重要的是要记住,在webpack配置中定义规则时,您要在其下定义规则,module.rules而不是rules。为了您的利益,webpack会在不正确的情况下发出警告。

装载程序部分中包含装载程序时,可以检查进一步的自定义。

Plugins

虽然加载器用于转换某些类型的模块,但可以利用插件执行更广泛的任务,如捆绑优化,资产管理和环境变量注入。

查看插件界面以及如何使用它来扩展webpacks功能。

要使用插件,您需要将require()其添加到plugins数组中。大多数插件都可以通过选项进行自定义。由于您可以在配置中多次使用插件用于不同目的,因此您需要通过使用new运算符调用它来创建它的实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

Mode

By setting the mode parameter to either developmentproduction or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

module.exports = {
mode: 'production'
};

Browser Compatibility

webpack支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。的WebPack需要Promiseimport()require.ensure()。如果要支持旧版浏览器,则需要在使用这些表达式之前加载polyfill

对webpack的初步研究1的更多相关文章

  1. 对webpack的初步研究8

    模块 编辑文档 在模块化编程中,开发人员将程序分解为称为模块的离散功能块. 每个模块的表面积小于完整程序,使验证,调试和测试变得微不足道.编写良好的模块提供了可靠的抽象和封装边界,因此每个模块在整个应 ...

  2. 对webpack的初步研究7

    Configuration 您可能已经注意到很少有webpack配置看起来完全相同.这是因为webpack的配置文件是导出对象的JavaScript文件.然后,webpack根据其定义的属性处理此对象 ...

  3. 对webpack的初步研究6

    Plugins 插件是webpack 的支柱.webpack本身构建在您在webpack配置中使用的相同插件系统上! 它们也是这样做的目的别的,一个装载机无法做到的. Anatomy webpack  ...

  4. 对webpack的初步研究5

    Loaders 加载器是应用于模块源代码的转换.它们允许您在处理import或“加载” 文件时预处理文件.因此,加载器有点像其他构建工具中的“任务”,并提供了处理前端构建步骤的强大方法.加载器可以将文 ...

  5. 对webpack的初步研究4

    Mode string module.exports = { mode: 'production' }; webpack --mode=production The following string ...

  6. 对webpack的初步研究3

    Output配置output配置选项告诉webpack如何将编译后的文件写入磁盘.请注意,虽然可以有多个entry点,但只output指定了一个配置. A filename to use for th ...

  7. 对webpack的初步研究2

    Entry Points 如“ 入门”中所述,有多种方法可以entry在webpack配置中定义属性.我们会告诉你,你的方法可以配置的entry属性,除了解释为什么它可能对你有用 Single Ent ...

  8. iOS多线程的初步研究(六)

    iOS多线程的初步研究(六) iOS平台提供更高级的并发(异步)调用接口,让你可以集中精力去设计需完成的任务代码,避免去写与程序逻辑无关的线程生成.运行等管理代码.当然实质上是这些接口隐含生成线程和管 ...

  9. iOS多线程的初步研究3

    iOS多线程的初步研究(三) 弄清楚NSRunLoop确实需要花时间,这个类的概念和模式似乎是Apple的平台独有(iOS+MacOSX),很难彻底搞懂(iOS没开源,呜呜). 官网的解释是说run ...

随机推荐

  1. JS - 创建只读属性

    一:为私有变量创建get()方法 这种方式可以创建 "伪 "只读属性.这并不是一种好方法,因为使用_函数_获得只读的_属性_不太符合一般的逻辑. /** * Represent a ...

  2. template标签就相当于React中的fragment

    template标签就相当于React中的fragment

  3. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_5_文件存储的原理和记事本打开文本显示原理

    原理 流对象指向这个文件a.txt 往文件中写数据,写的时候比较特殊 97转换成二进制是多少呢? 输入97然后选择二进制.转换后为 1100001 硬盘上实际存的是97的二进制 97查询阿斯克码表就是 ...

  4. 操作excel--xlwt/xlrd/xlutils模块

    一.写Excel (导入xlwt模块)需求:只要你传入一个表名,就能把所有的数据导入出来写入excel,字段名是excel的表头分析: 1.要动态获取到表的字段 cur.description能获取到 ...

  5. python实现excel转换成pdf

    1.安装 需要安装pywin32包,以实现对Office文件的操作,可以批量转换为pdf文件.支持 doc, docx, ppt, pptx, xls, xlsx 等格式. pip install p ...

  6. unity不规则按钮解决方案

    一种是alpha检测 一种是设置collider 参考: https://zhuanlan.zhihu.com/p/34204396 下面给出第二种方案代码 ///按钮多边形点击方案,注意Canvas ...

  7. Noi2018 归途

    zz:https://blog.csdn.net/dreaming__ldx/article/details/81106748 以海拔为第一关键字对边进行从大到小的排序,然后修建kruskal重构树, ...

  8. String类为什么是final

    String 本身一个对象,对象在jvm启动的时候就要实例化和其他类调用就要实例化,第一性能,第二安全,因为string的高频繁的使用,如果被继承,哪里性能将会大大降低,因为不能被继承,换句话来说就比 ...

  9. xmake新增智能代码扫描编译模式

    最近给xmake增加了一个新特性,对于一份工程源码,可以不用编写makefile,也不用编写各种make相关的工程描述文件(例如:xmake.lua,makefile.am, cmakelist.tx ...

  10. [Web 前端] 015 css 三种元素的介绍

    1. 块元素,内联元素,内联块元素 元素就是标签 布局中常用的有三种标签 块元素 内联元素 内联块元素 1.1 块元素 也称为行元素 布局中常用的标签,如 div.p.ul.li.h1~h6.dl.d ...