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
随机推荐
- spring cloud 学习(二)关于 Eureka 的学习笔记
关于 Eureka 的学习笔记 个人博客地址 : https://zggdczfr.cn/ ,欢迎光临~ 前言 Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Sprin ...
- ADOX创建ACCESS 表时,几个附加属性
中文 英文 允许空字符串 Jet OLEDB:Allow Zero Length Unicode压缩 Jet OLEDB:Compressed UNICODE Strings 有效性规则 Jet ...
- Spring-data-jpa详解
转自:http://www.cnblogs.com/dreamroute/p/5173896.html
- Memcached 扩展常用方法
保存数据 向memcached保存数据的方法有 add replace set 它们的使用方法都相同: $add = $memcached->add( '键', '值', '期限' ); $re ...
- ORACLE telnet 1521 不通及ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务的解决
服务器上安装了oracle11g , 防火墙上已经增加1521 入站规则.但是内网客户端配置好了TNS无法连接.telnet 1521 不通. 需要在服务器上\product\10.2.0\db_1\ ...
- xml与json
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSON现在基本上作为前后端数据交互的重要载体,在JSON之前,前后端主要的传输方式主要是通过XML或者文 ...
- Python判断变量的数据类型的两种方法
https://www.cnblogs.com/jessicaxu/p/7727264.html
- SWIFT解析天气JSON格式
访问以下链接可以得到京城当天的天气:http://www.weather.com.cn/adat/sk/101010100.html 返回的JSON格式如下: {"weatherinfo&q ...
- jmeter随笔(31)--RandomString和Random函数使用
在使用jmeter中,用到了一些自带的函数,后面我逐步把自己用到的分享出来,当然这些是比较简单的,也可自己看看英文文档,小怪这里只是结合自己分享. 视频介绍: https://v.qq.com/x/p ...
- JavaScript学习(二)——深入学习js对象的原型与继承
了解对象 什么是对象? …… 这个就不说了 对象的声明的两种方式 var person = new Object(); person.name="linchen"; pers ...