webpack 打包过程及常用插件
前言
要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出。
chunk: This webpack-specific term is uesd internallt to manage the bunding process. Bundles are composed out of chunks,of which there of several tyeps (entry and child). Typically ,chunks correspond with the output bundles,however,there are some configurations that don't yield a one-to-one relationship. Simply,a chunk is a group of modules within the webpack process , a bundle is an emitted chunks or a set of chunks.
主要内容
webpack 就是 loader 与 plugin 的集合,loader 用于加载不同的文件,plugin 用于优化打包过程。
webpack 的主要构建流程如下:
(1)解析webpack 配置参数,合并从命令行输入的参数和 webpack.config.js配置文件的配置参数,生成最终的配置结果。
(2)注册在配置文件中使用的所有插件,用于监听 webpack构建生命周期的各种事件。
(3)从配置文件的 entry入口开始解析文件的,递归找到每个文件依赖的文件,构建AST语法树。
(4)在递归解析文件的过程中,根据文件的类型和 loader的配置,用loader对象进行转换。
(5)递归得到每个文件的最终结果,根据ertry的配置,生成chunk
(6)输出所有 chunk 到对应的文件目录。
在构建过程中,配置中的plugin会在合适的时间做合适的事情。
【常用插件】
ExtractTextPlugin :从bundle 中提取特定的text到一个文件中。
DefinePlugin :允许创建一个在编译时可以配置的全局变量,这使得一个应用可以打包编译出多个不同的应用。webpack 在打包编译时会对变量直接做文本替换,所以给定的字符串必须包含字符串本省的实际引号。JSON.string()。
ProvidePlugin 插件,自动加载对应的模块,而不需要到处 通过import 或者 require 引入。
CopyWebpackPlugin:将单个文件或者整个目录复制到构建目录
HtmlWebpackPlugin 简化了 HTML 文件的创建,为应用生成一个 index.html,并添加一个script 脚本标签来加载生成的 bundle.js
BudlieAnalyzerPlugin: 可视化的webpack 打包后文件的分析插件,作用:1.认识打包后的文件和大小;2.以便优化打包后的文件
CommonsChunkPlugin :从 bundle中分离出公共的模块,便于缓存使用。
webpack 打包过程及常用插件的更多相关文章
- webpack打包过程如何调试?
本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...
- Sublime3安装过程及常用插件安装及常用快捷键
1 先去http://www.sublimetext.com/官网下载软件,然后网上找一个验证码,注册完成. 2 安装Package Control ,Package Control 插件是一个方 ...
- webpack打包过程及开发过程
1.传统: 1)分模块去定义js.js中要导出将来要被打包的方法module.exports 2)定义main.js入口文件(主文件).在此文件中,导入引用的js文件 var {add} = requ ...
- vue用webpack打包时引入es2015插件
1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...
- webpack 打包
React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 ...
- 【vue】饿了么项目-使用webpack打包项目
1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的& ...
- 10分钟搞定webpack打包
入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的webpack打包过程拔出来给大家鲁一遍,就算帮助那些小白了,废话不多说,开始鲁起来,大家跟着我一起撸... 首先, ...
- webpack 入门和常用插件的使用
常用配置参数 module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, ...
- Webpack 2 视频教程 018 - 使用可视化图表进行统计分析打包过程
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
随机推荐
- LightOJ 1140 计数/数位DP 入门
题意: 给出a,b求区间a,b内写下过多少个零 题解:计数问题一般都会牵扯到数位DP,DP我写的少,这道当作入门了,DFS写法有固定的模板可套用 dp[p][count] 代表在p位 且前面出现过co ...
- WCF使用注意事项
执行如下 批处理:"C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin\svcutil.exe" http://127.0.0.1: ...
- 如何设计一个优雅健壮的Android WebView?(上)
转:如何设计一个优雅健壮的Android WebView?(上) 前言 Android应用层的开发有几大模块,其中WebView是最重要的模块之一.网上能够搜索到的WebView资料可谓寥寥,Gith ...
- 【洛谷 P4735】 最大异或和 (可持久化Trie)
题目链接 维护整个数列的异或前缀和和\(s\),然后每次就是要求\(s[N]\text{^}x\text{^}s[k],l-1<=k<=r-1\)的最大值 如果没有\(l\)的限制,那么直 ...
- windows10安装oracle11g报错ORA-01034、ORA-01078
ORA-01034表示数据库实例未建立,可以先用管理员账号进入一个空白实例 sqlplus / as sysdba; 如果您当前使用的账号是安装oracle的账号,则不需要账号密码就可以登陆oracl ...
- 【目录】Python自动化运维
目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...
- Python3 json、pickle序列化与反序列化
注意:可以dumps多次,loads只能一次,一般我们只dumps一次,loads一次,多个版本就写入多个文件 一.json序列化与反序列化: 支持各种语言数据交互,但只能处理字典,列表,集合等简单的 ...
- bzoj 1191 超级英雄Hero
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1191 题解: 裸匈牙利,注意如果出现找不到增广路的情况就直接break #include& ...
- myeclipse安装插件phpeclipse后进行PHP代码编写
平常一般写java代码,有时也捣腾一下php,原来安装过zend studio来编写php代码,无奈电脑越来越卡,于是卸载了zend,然后在myeclipse中安装phpeclipse这款插件来完成p ...
- [New learn]动画-基于UIView
原文:https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/Ani ...