实战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 ...
随机推荐
- Spring Boot 快速入门 史上最简单
1.Spring Boot 概述 Spring Boot 是所有基于 Spring 开发的项目的起点.Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的 ...
- [Next] Next.js+Nest.js实现GitHub第三方登录
GitHub OAuth 第三方登录 第三方登录的关键知识点就是 OAuth2.0 . 第三方登录,实质就是 OAuth 授权 . OAuth 是一个开放标准,允许用户让第三方应用访问某一个网站的资源 ...
- CTR@模型整体架构
1. 推荐系统 1.1 总体框架 主要包括:样本选择.数据清洗.特征提取与选择.模型训练.在线预估和排序. 1.2 目的 帮助用户找到想要的商品,挖掘数据分布. 降低信息过载. 提高站点的点击率/转化 ...
- 虚拟机linux centos7 查找ip不到的设置
1.centos7 系统后查找ip信息,不用ifconfig -a 命令,开始使用ip Addr命令 输入ip Addr 命令后,并没有看到实际的ip地址,记住上述图片中红色标记的ens32 这个就是 ...
- TCP/IP协议第一卷第二章
环回接口: 127全网段均被作为环回地址. 传给广播地址或多播地址的数据报复制一份给环回接口,然后传送到以太网上.这是因为广播传送和多播传送的定义包含自己本身. 任何传给该主机IP地址的数据均送到环回 ...
- [考试反思]0801NOIP模拟测试11
8月开门红. 放假回来果然像是神志不清一样. 但还是要接受这个事实. 嗯,说好听点,并列rank#7. 说难听点,垃圾rank#18. 都不用粘人名就知道我是哪一个吧... 因为图片不能太长,所以就不 ...
- 朋友的一年工作经验跳槽字节跳动社招经历分享(已拿offer)
虽然已经临近年末,但是还是萌生要看新机会的想法,主要的原因是觉得在目前的岗位上技术增长遇到的瓶颈,因此想去做一些更有挑战的工作.因为仍然准备继续在深圳工作,因此选定了三家公司,腾讯.字节跳动和 sho ...
- WeihanLi.Npoi 近期更新
WeihanLi.Npoi 近期更新 Intro 最近对我的 NPOI 扩展做了一些改变,一方面提高性能,一方面修复bug,增加一些新的功能来让它更加好用,前几天发布了 1.5.0 版本,下面来介绍一 ...
- 「NOIP模拟赛」数位和乘积(dp,高精)
统计方案数,要么组合数,要么递推(dp)了. 这是有模拟赛历史以来爆炸最狠的一次 T1写了正解,也想到开long long,但是开错了地方然后数组开大了结果100->0 T3看错题本来简单模拟又 ...
- Spring容器自动调用方法的两种方式
先看一个Spring中Bean的实例化过程: 1.配置文件中指定Bean的init-method参数 <bean class="com.jts.service.UserService& ...