01、概念股

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),
其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

一、核心概念

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)
  • 模式
1.1入口【entry】
入口起点(entry point)指示webpack应该使用哪个模块,来作为构建其内部依赖图的开始。
进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 每个依赖项随即被处理,最后输出到称之为 bundles 的文件中

entry 配置的简单例子 webpack.config.js

module.exports = {
entry: `./path/to/my/entry/file.js`
};
1.2出口【output】
output 属性告诉 webpack 在哪里输出它所创建的 bundles,
以及如何命名这些文件,默认值为./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'
}
}; 在上面的示例中,我们通过 output.filename 和 output.path 属性,
来告诉 webpack bundle 的名称,以及我们想要 bundle 生成(emit)到哪里
1.3 loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)。
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块

在更高层面,在 webpack 的配置中 loader 有两个目标:

test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性,表示进行转换时,应该使用哪个 loader。

webpack.config.js

const path = require('path');

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

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这告诉 webpack 编译器(compiler) 如下信息:

“嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先使用 raw-loader 转换一下。”

重要的是要记得在 webpack 配置中定义 loader 时,要定义在 module.rules 中,而不是 rules

1.4 插件[plugins]

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使同一个插件,
这时需要通过使用 new 操作符来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件 const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}; module.exports = config;
1.5 模式

通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

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

实战webpack系列说明的更多相关文章

  1. 实战webpack系列04

    04. 一切皆模块 Webpack有一个不可不说的优点,它把所有的文件都都当做模块处理,JavaScript代码,CSS和fonts以及图片等等通过合适的loader都可以被处理. 一.CSS 继续上 ...

  2. 实战webpack系列03

    03.Webpack的强大功能 一.生成Source Maps(使调试更容易) 通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的 ...

  3. 实战webpack系列02

    02. 开始使用webpack 1.1.安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample project),在终端中转到该文件夹后执行下述指令就可 ...

  4. 实战webpack系列01

    01. 采坑webpack 一.webpack初章 // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpac ...

  5. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  6. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  7. 【WEB API项目实战干货系列】- 导航篇(十足干货分享)

    在今天移动互联网的时代,作为攻城师的我们,谁不想着只写一套API就可以让我们的Web, Android APP, IOS APP, iPad APP, Hybired APP, H5 Web共用共同的 ...

  8. 【WEB API项目实战干货系列】- API登录与身份验证(三)

    上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...

  9. 【WEB API项目实战干货系列】- 接口文档与在线测试(二)

    上一篇: [WEB API项目实战干货系列]- Web API 2入门(一) 这一篇我们主要介绍如何做API帮助文档,给API的调用人员介绍各个 API的功能, 输入参数,输出参数, 以及在线测试 A ...

随机推荐

  1. JAVA中锁的解决方案

    前言 在上一节中,我们给大家介绍了什么是锁,以及锁的使用场景,我相信大家对锁的定义,以及锁的重要性都有了比较清晰的认识.在这一节中,我们会给大家继续做深入的介绍,介绍JAVA为我们提供的不同种类的锁. ...

  2. ansible模块之command、shell、script、file、copy、fetch

    前戏 ansible 批量在远程主机上执行命令 openpyxl 操作excel表格 puppet ansible slatstack ansible epel源 第一步: 下载epel源 wget ...

  3. "Dependency on app with no migrations: %s" % key[0]

    问题描述:我在model中建好模型类,运行的控制台就报错误: 解决方法:1,首先需要在setting中重载AUTH_USER_MODEL AUTH_USER_MODEL = 'users.UserPr ...

  4. 在VMware下通过挂载系统光盘搭建本地yum仓库的方法

    一.虚拟机的安装 首先你要有一个VMware虚拟机,没有软件的朋友可以看我的前几篇博客 安装VMware虚拟机 二.进入虚拟机(在这里我们进入一个Linux虚拟机下的CentOS操作系统进行演示) 首 ...

  5. 使用float设置经典的网站前端结构(深入探讨)

    .要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...

  6. MongoDB的基础命令

    MongoDB的介绍 MongoDB: 是一个基于bson(二进制json)的NoSQL数据库 MongoDB的三要素: 数据库: 类似于MYSQL的数据库 集合: 类似于MYSQL的表 文档: 类似 ...

  7. NOIP模拟 26

    我辛辛苦苦敲了3.5h的码 得分和一份8B的码一样多 自闭555. T1 marshland 最小费用可行流, 板子不会,建图更不会. 当然是用暴搜得到0分的好成绩啦 补了补板子. %了%RNB. 学 ...

  8. EffectiveJava-1

    最近在看EffectiveJava,记录一下,分享一下自己的心得. 一.将局部变量的作用于最小化 在第一次使用的地方进行声明,过早的声明局部变量,会延长局部变量的生命周期,若在代码块外声明变量,当程序 ...

  9. 考试T1护花

    传送门 这题的提议似乎有什么问题,只要约翰选好了要抓那头牛,他就不会吃草了,站在原地傻等? 这题就是贪心,但在用cmp中比较单位时间吃草数量时,要用double型,不然可能会有点一样... 还有就是主 ...

  10. Vmware虚拟机的安装

    Vmware WorkStation是一款桌面计算机虚拟软件,能够让用户在单一主机上同时运行多个不同的操作系统.每个虚拟操作系统的硬盘分区.数据配置都是独立的,同时又可以将多台虚拟机构建为一个局域网. ...