webpack从入门到精通(一)初体验
1. webpack简介
1.1 webpack是什么
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
1.2 webpack的五个核心概念
Entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。
Output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。
Loader
Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)
Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。
Mode
模式(Mode)指示 webpack 使用相应模式的配置。
选项 | 描述 | 特点 |
---|---|---|
development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 development。启用 NamedChunksPlugin 和NamedModulesPlugin。 | 能让代码本地调试运行的环境 |
production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin。 | 能让代码优化上线运行的环境 |
2. webpack初体验
下面所有代码演示的webpack版本为 4.44.2
npm install webpack@4.44.2 -g
2.1 初始化配置
1)初始化 package.json
npm init
2)下载并安装 webpack
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
2.2 编译打包应用
1)创建文件
2)运行指令
开发环境指令:
webpack src/js/index.js -o build/js/built.js --mode=development
功能:webpack 能够编译打包 js 和 json 文件,并且能将 es6 的模块化语法转换成浏览器能识别的语法。
生产环境指令:
webpack src/js/index.js -o build/js/built.js --mode=production
功能:在开发配置功能上多一个功能,压缩代码。
3)注意
webpack 能够编译打包 js 和 json 文件。 能将 es6 的模块化语法转换成浏览器能识别的语法。 能压缩代码。
不能编译打包 css、img 等文件。 不能将 js 的 es6 基本语法转化为 es5 以下语法。
2.3 代码演示
我们创建一个目录,并初始化配置,目录下会生成一个package.json和package-lock.json文件。
创建index.js
import data from './data.json';
console.log(data);
function add(x, y) {return x + y;
}
console.log(add(1, 2));
data.json
{"name": "jack","age": 18
}
运行打包命令
webpack ./src/index.js -o ./build/built.js --mode=development
最终的文件目录如下:
我们使用 node命令运行main.js,可以看到如下输出:
{ name: 'jack', age: 18 }
3
webpack从入门到精通(一)初体验相关推荐
- webpack从入门到精通(四)优化打包配置总结②
1. tree shaking tree-shaking的本质是消除无用的js代码.无用代码消除广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为D ...
- webpack从入门到精通(四)优化打包配置总结①
1. HMR HMR 即模块热替换(hot module replacement)的简称,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替 ...
- webpack从入门到精通(三)生产环境的基本配置
1. 提取css成单独文件 1)创建文件 index.js中我们引入css文件 import '../css/a.css'; import '../css/b.css'; 2)下载plugin包 np ...
- webpack从入门到精通(二)开发环境的基本配置
1. 打包样式资源 1)创建文件 文件代码如下: index.less #title {color: #fff; } index.css html, body{margin: 0;padding: 0 ...
- ArcEngine 入门教程-控件初体验
缘起 个人总结梳理,顺便练练文笔,For me and for you like me! 目标 我一直很认同古人所说的君子性非异也,善假于物也,本文主要目的是告诉读者如何使用帮助来学习了解ArcEng ...
- Xcode5 开发入门-环境及初体验
IPhone 的开发有专门的集成开发环境Xcode ,可以在Appstore 上下载最新版本,目前为Xcode 5,下载位置如下: 选择后开始下载,文件比较大,下载需要一段时间. 下载后一般自动完成安 ...
- 《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 三 NSArray
2019独角兽企业重金招聘Python工程师标准>>> 1 int main(int argc, const char * argv[]) { 2 @autoreleasepool ...
- 《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 五 NSDicionary + NSMutableDictionary...
2019独角兽企业重金招聘Python工程师标准>>> 1 int main(int argc, const char * argv[]) { 2 @autoreleasepool ...
- 《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 二 NSMutableString
2019独角兽企业重金招聘Python工程师标准>>> NSMutableString可变字符串 1 int main(int argc, const char * argv[]) ...
最新文章
- 《麻省理工科技评论》:2018年18大科技趋势,2017年7大失败技术
- [译]ECMAScript:ES.next和ES6以及ES Harmony之间的区别
- 第七章之main函数和启动例程
- QEMU 3.0.0 新特性一览
- 网络爬虫--20.【Scrapy-Redis实战】分布式爬虫获取房天下--代码实现
- HTTPS学习笔记一----HTTPS的基础理论知识
- 卢伟冰怼荣耀V30相机被喷 卢伟冰:从不打无准备之仗
- Linux-进程间通信(三): 共享内存
- nginx的安装及简单负载均衡配置
- 产品经理小白面试经验总结
- 实现3D 场景——three.js学习篇二之理解基础概念
- 优秀网站导航设计的6个原则
- 考研加油站系统的设计与实现
- kettel连接Access常见错误解决方案
- 嵌入式计算机的生活应用,嵌入式系统在生活中有哪些应用
- 关于HTTP协议、万维网文档以及网络编程的基础梳理
- 亚马逊ERP软件贴牌OEM是什么意思有什么优势
- HP superdome2刀片故障处理记录-实战篇
- 曙光服务器免费蹭一个月
- 计算机提示网络不可用,Windows电脑系统显示无线网络不可用怎么办?