webpack入门认知
webpack 是什么?
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
主要概念,及作用,及使用方式?
主要概念:entry,output,loader,plugins
entry(输入):
entry: {[entryChunkName: string]: string|Array<string>}
指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
在entry中可以配置多个入口(多页面应用),使用CommonsChunkPlugin可以为每个页面间的应用程序共享代码创建bundle,多页应用能够复用入口起点之间的大量代码/模块。
output(输出):
配置
output
选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口
起点,但只指定一个输出
配置。
output的属性是一个包含filename,path 的对象
filename
:输出文件的文件名path
:目标输出目录的绝对路径
用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js', // 确保每个文件具有唯一的名称
path: __dirname + '/dist'
}
}
loader
loader 用于对模块的源代码进行转换,更加灵活地引入细粒度逻辑,例如压缩、打包、语言翻译。。。
三种使用方式:
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
plugins(插件):
插件目的在于解决 loader 无法实现的其他事,webpack 插件是一个具有
apply
属性的 JavaScript 对象。
插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins
属性传入 new
实例
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
webpack入门认知的更多相关文章
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- webpack入门--前端必备
webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...
- webpack入门笔记
此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html
随机推荐
- python 利用quick sort思路实现median函数
# import numpy as np def median(arr): #return np.median(arr) arr.sort() return arr[len(arr)>>1 ...
- 如何用Curl 来post xml 数据
因为登陆服务升级,密码策略变更,以前的测试脚本中的用户密码已经不能登陆,试图通过API直接更改密码,一种是直接update,一种是change,使用curl的时候均未成功. 最后索性重新用curl命令 ...
- Freemaker FTL指令常用标签及语法
https://blog.csdn.net/pengpengpeng85/article/details/52070602 FTL指令常用标签及语法 注意:使用freemaker,要求所有标签必须闭合 ...
- Awk 从入门到放弃(3) —- 内置变量
转:http://www.zsythink.net/archives/1374 NF :当前行的字段个数 NR: 行号 FNR: 各文件分别计数的行号 RS: 输入行分隔符 ORS:输出行分隔符 内 ...
- 如何高效使用Google
摘自http://simplyy.space/ 核心思想 1.首先,想好你想要寻找什么. 哪些词能够最好地描述你要寻找的信息或者概念? 哪些词是你能够用来替换的? 有没有那些词是可以不必包括在你想要搜 ...
- (C/C++学习笔记) 十六. 预处理
十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...
- PowerShell基础
1. 一些命令像Get-SPSite有不同的参数变量.这些变量通过-?展示出来. Get-SPSite -? 2. F3 在当前行显示最近的一条命令结果 3. F7 显示之前执行过的命令列表 4. 显 ...
- 《JAVA---day03---运算符》
/*[位运算符] 运算符: 运算 范例 说明 <<: 左移 3<<2=12--->3*2*2=12 >>: 右移 3>>2=1---->3/ ...
- GitHub上最流行的Top 10 JavaScript项目
统计出Github中所有项目的数量,几乎是不可能的,而明确指出哪些是最优秀的项目就更不可能了.如果说到JavaScript,曾经极富创新的项目(很可能)在一两个月后就会变得过时.落后.以防被淹没在大量 ...
- QList 列表指针的 释放
1,使用qDeleteAll() QList<T*> list: qDeleteAll(list): list = NULL; QList<T*> *listp: qDelet ...