实战webpack系列说明
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系列说明的更多相关文章
- 实战webpack系列04
04. 一切皆模块 Webpack有一个不可不说的优点,它把所有的文件都都当做模块处理,JavaScript代码,CSS和fonts以及图片等等通过合适的loader都可以被处理. 一.CSS 继续上 ...
- 实战webpack系列03
03.Webpack的强大功能 一.生成Source Maps(使调试更容易) 通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的 ...
- 实战webpack系列02
02. 开始使用webpack 1.1.安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample project),在终端中转到该文件夹后执行下述指令就可 ...
- 实战webpack系列01
01. 采坑webpack 一.webpack初章 // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpac ...
- Vue实战Vue-cli项目构建(Vue+webpack系列之一)
用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...
- 全网最贴心webpack系列教程和配套代码
webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...
- 【WEB API项目实战干货系列】- 导航篇(十足干货分享)
在今天移动互联网的时代,作为攻城师的我们,谁不想着只写一套API就可以让我们的Web, Android APP, IOS APP, iPad APP, Hybired APP, H5 Web共用共同的 ...
- 【WEB API项目实战干货系列】- API登录与身份验证(三)
上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...
- 【WEB API项目实战干货系列】- 接口文档与在线测试(二)
上一篇: [WEB API项目实战干货系列]- Web API 2入门(一) 这一篇我们主要介绍如何做API帮助文档,给API的调用人员介绍各个 API的功能, 输入参数,输出参数, 以及在线测试 A ...
随机推荐
- JAVA中锁的解决方案
前言 在上一节中,我们给大家介绍了什么是锁,以及锁的使用场景,我相信大家对锁的定义,以及锁的重要性都有了比较清晰的认识.在这一节中,我们会给大家继续做深入的介绍,介绍JAVA为我们提供的不同种类的锁. ...
- ansible模块之command、shell、script、file、copy、fetch
前戏 ansible 批量在远程主机上执行命令 openpyxl 操作excel表格 puppet ansible slatstack ansible epel源 第一步: 下载epel源 wget ...
- "Dependency on app with no migrations: %s" % key[0]
问题描述:我在model中建好模型类,运行的控制台就报错误: 解决方法:1,首先需要在setting中重载AUTH_USER_MODEL AUTH_USER_MODEL = 'users.UserPr ...
- 在VMware下通过挂载系统光盘搭建本地yum仓库的方法
一.虚拟机的安装 首先你要有一个VMware虚拟机,没有软件的朋友可以看我的前几篇博客 安装VMware虚拟机 二.进入虚拟机(在这里我们进入一个Linux虚拟机下的CentOS操作系统进行演示) 首 ...
- 使用float设置经典的网站前端结构(深入探讨)
.要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...
- MongoDB的基础命令
MongoDB的介绍 MongoDB: 是一个基于bson(二进制json)的NoSQL数据库 MongoDB的三要素: 数据库: 类似于MYSQL的数据库 集合: 类似于MYSQL的表 文档: 类似 ...
- NOIP模拟 26
我辛辛苦苦敲了3.5h的码 得分和一份8B的码一样多 自闭555. T1 marshland 最小费用可行流, 板子不会,建图更不会. 当然是用暴搜得到0分的好成绩啦 补了补板子. %了%RNB. 学 ...
- EffectiveJava-1
最近在看EffectiveJava,记录一下,分享一下自己的心得. 一.将局部变量的作用于最小化 在第一次使用的地方进行声明,过早的声明局部变量,会延长局部变量的生命周期,若在代码块外声明变量,当程序 ...
- 考试T1护花
传送门 这题的提议似乎有什么问题,只要约翰选好了要抓那头牛,他就不会吃草了,站在原地傻等? 这题就是贪心,但在用cmp中比较单位时间吃草数量时,要用double型,不然可能会有点一样... 还有就是主 ...
- Vmware虚拟机的安装
Vmware WorkStation是一款桌面计算机虚拟软件,能够让用户在单一主机上同时运行多个不同的操作系统.每个虚拟操作系统的硬盘分区.数据配置都是独立的,同时又可以将多台虚拟机构建为一个局域网. ...