webpack入门必知必会

前言

这是我第一篇介绍webpack的文章，先从一个入门教程开始吧，后续会有更多相关webpack的文章推出。

首先什么是webpack？如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。

本文作为一篇入门教程，这里先从webpack最简单的3招开始介绍，即拆分、打包、压缩。

步骤

1.传统项目中的问题

在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的：

index.html

<html>
 <head>
 <title>传统项目</title>
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 </head>
 <body>
 <script src="app/index.js"></script>
 </body>
</html>

app/index.js

function main() {
 $('body').html('hello world!');
}
main();

以上示例中，脚本之间存在着隐式依赖关系。

index.js取决于被包括在页面运行之前的jQuery，它只是假设有一个全局变量$的存在。

这样管理JavaScript项目有一些问题：

如果依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。

如果包含依赖项但没有使用，那么浏览器必须下载很多不必要的代码。

所以为了解决以上问题，我们需要使用webpack来实现一些改变。

2.准备

首先我们得在项目中安装webpack，我们打开命令行工具运行：

mkdir demo && cd demo // 新建demo文件夹并打开
npm init // 初始化npm，生成package.json配置文件
npm install --save-dev webpack@beta // 安装webpack2.0版本，mac系统可能需要添加sudo命令

以上使用的npm命令需要安装node.js，可以点击这里安装即可：node.js

为了改进上方传统项目中的不足，我们这里还需要安装jQuery：

npm install --save jQuery // 安装jQuery

3.改变

改变后的index.js

var $ = require('jquery');
function main() {
 $('body').html('hello world!');
}
main();

这里我们可以直接在index.js里引用jQuery，index.js明确要求jQuery的存在，这样就不存在隐式依赖的问题（没有全局污染）。

改变后的index.html

<html>
 <head>
 <title>webpack项目</title>
 </head>
 <body>
 <script src="dist/bundle.js"></script>
 </body>
</html>

这里我们的index.html文件只引入了最终打包后的bundle.js。现在运行webpack命令将index.js输出为bundle.js。

运行命令：webpack app/index.js dist/bundle.js

webpack app/index.js dist/bundle.js
Hash: 3bb91a6dedfc2a2a1c08
Version: webpack 2.2.0-rc.4
Time: 397ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [1] ./app/index.js 83 bytes {0} [built]

最终我们在浏览器中打开index.html页面可以看到输出的“hello world!”。

4.拆分

现在如果我们index.js中的”hello world!”字符串需要放到另外一个hello.js中，然后在index.js中引入使用的话，这就涉及到webpack模块拆分的功能。

app/index.js

var $ = require('jquery');
var str = require('./hello.js');
function main() {
 $('body').html(str);
}
main();

app/hello.js

var str = 'hello world!';
module.exports = str;

我们在hello.js中通过module.exports导出str变量，然后在index.js通过require导入同样可以实现浏览器中输入“hello world!”的效果，当然我们需要重新运行下webpack命令：webpack app/index.js dist/bundle.js

5.打包

其实在上面我们已经使用了打包命令：

webpack app/index.js dist/bundle.js

其中的app/index.js即为打包的入口文件，而dist/bundle.js为输出文件。

但是我们会发现这样的命令不利于我们复杂项目配置的使用，对于更复杂的配置，我们可以利用配置文件webpack.config.js来统一管理。

我们可以在demo文件夹下新建webpack.config.js配置文件：

module.exports = {
 entry: './app/index.js',
 output: {
 filename: 'bundle.js',
 path: './dist'
 }
}

上方配置中的entry就是我们的入口文件，可以有多个入口文件，而output即为webpack打包的输入对象，filename为输出文件名，path为输出路径。

如此我们运行命令行：

webpack --config webpack.config.js

同样可以生成打包目录dist及打包文件bundle.js。

当然你也可以直接运行简化的命令：

webpack

webapck会自动去寻找当前目录下的webpack.config.js文件。

6.压缩

上一步我们利用webpack命令将多个多件打包到了一个bundle.js的文件中，但是并未进行压缩，你可以打开bundle.js进行查看。

而如果我们需要对打包后的代码进一步压缩处理，我们可以运行命令：

webpack -p

这时我们可以来进行下打包和压缩的文件大小对比

打包命令：webpack

webpack
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 387ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]

输出的bundle.js整个文件大小为270 kB。

压缩命令：webpack -p

webpack -p
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 1967ms
 Asset Size Chunks Chunk Names
bundle.js 88.3 kB 0 [emitted] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]

输出的bundle.js整个文件大小为88.3 kB。

很明显，文件被压缩了。

7.进一步压缩优化

上方我们通过webpack的压缩命令将文件打包并压缩了，但是对于webpack -p压缩后的文件来说其实还有压缩的余地。如果你使用的是webpack1.0，那么你可以在配置文件中添加plugins配置项，并且加入如下插件：

var webpack = require('webpack');
module.exports = {
 ...
 plugins:[
 // 去除代码块内的告警语句
 new webpack.optimize.UglifyJsPlugin({
 compress: {
 warnings: false
 }
 }),
 // 优先考虑使用最多的模块，并为它们分配最小的ID
 new webpack.optimize.OccurenceOrderPlugin()
 ]
 ...
}

而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress选项默认为false，并且OccurrenceOrderPlugin默认启用，所以无需进行配置。

结语

本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，希望以此加深大家对webpack基础知识的印象。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • webpack入门+react环境配置

    webpack入门+react环境配置

    小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

  • webpack学习--webpack经典7分钟入门教程

    webpack学习--webpack经典7分钟入门教程

    一.什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. webpack模式图 二.为什么使用webpack 市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源.而webpack有以下几个优点: 1.将依赖树拆分成按需加

  • MYSQL必知必会读书笔记第十和十一章之使用函数处理数据

    MYSQL必知必会读书笔记第十和十一章之使用函数处理数据

     mysql简介 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. 拼接字段 存储在数据库表中的数据一般不是应用程序所需要的格式.我们需要直接从数据库中检索出转换.计算或格式化过的数据:而不是检索出数据,然后再在客户机应用程序或报告程序中重新格式化. 计算字段(字段 = 列,不过数据库列一般称为列,而字段通常用于计算字段中)并不实际存在于数据库表中,计算字段是运行时在select语句内创建的

  • JavaScript必知必会(七)js对象继承

    对象继承inherit var o = { r: }; var c = function f() { }; c.prototype = o; c.r = ; alert(o.r);//被继承的属性值未发生改变.alert(c.r);//c中r覆盖了o中的属性. 如何调用o中的r属性呢. var o = { r: }; var c = function f() { }; c.prototype = o; alert(o.r);// 被继承的属性值未发生改变. alert(c.r);//查询r属性,

  • JavaScript必知必会(十) call apply bind的用法说明

    call 每个func 都会继承call apply等方法. function print(mesage) { console.log(mesage); return mesage; } print.call(this, "cnblogs");//cnblogs call(thisAgr,agr1,agr2...) ,call方法第一个传递一个context上下文.后面是参数的个数. apply apply(thisAgr,[agr1,agr2]),apply方法和call的用法一样,

  • JavaScript必知必会(三) String .的方法来自何方

    String 我们知道javascript 包括:number,string,boolean,null,undefined 基本类型和Object 类型. 在我的认知中,方法属性应该是对象才可以具有的. var str="hello,world"; var s=str.subString(,);//ell alert(typeof(str)+":"+typeof(s));//string:string 从上面的返回类型来看,str是string 类型的. 再看下面的

  • JavaScript必知必会(六) delete in instanceof

    in in 判断 左边 的字符串或者能转换成字符串的是否属于 右边 的属性. var data = { x: , y: };//定义了直接对象 alert("x" in data);//true ,x 是data 的一个属性 alert( in data);//false , 是data的属性值. var arr = [, , ];//定义了直接数组对象 alert( in arr);//true ,arr 数组的index包括,,, 是他的一个[]属性. alert( in arr)

  • JavaScript必知必会(五) eval 的使用

    eval eval(parse) parse :里面跟参数字符串,我们知道执行javascript 会编译执行, 改变全局变量的值: var x = ; //定义的全局变量 alert(x);// var g = eval("x="); //eval 会根据当前上下文解析x alert(x);// 在全局作用域引用eval,改变全局作用域的值,不改变局部作用域的值 var g = eval; //全局引用eval var x = "global";//定义全局变量

  • MySQl数据库必知必会sql语句(加强版)

    这一篇属于加强版,问题和sql语句如下. 创建users表,设置id,name,gender,sal字段,其中id为主键 drop table if exists users; create table if not exists users( id int(5) primary key auto_increment, name varchar(10) unique not null, gender varchar(1) not null, sal int(5) not null ); inse

  • MYSQL必知必会读书笔记第六章之过滤数据

    MYSQL必知必会读书笔记第六章之过滤数据

    mysql简介 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. where子句的位置,在同时使用ORDER BY 和WHERE子句时应该让ORDER BY 位于where之后,否则会产生错误. 1.不匹配检查 复制代码 代码如下: SELECT vend_id FROM products where vend_id <>1003 等同于 复制代码 代码如下: SELECT vend_id

  • MYSQL必知必会读书笔记第三章之显示数据库

    MYSQL必知必会读书笔记第三章之显示数据库

    MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. show column from tablename: 对每一个字段返回一行,行中包含字段名,数据类型.是否允许NULL.键信息.默认值以及其他信息. describe 语句: MySQL支持使用describ作为show columns from 的一种快捷方式.describ tablename 所支持的其他的show语句: show s

  • 经典的20道AJAX面试题(必知必会)

    1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是"Asynchronous JavaScript and XML"的缩写.他是指一种创建交互式网页应用的网页开发技术. Ajax包含下列技术: 基于web标准(standards-basedpresentation)XHTML+CSS的表示: 使用 DOM(Document ObjectModel)进行动态显示及交互: 使用 XML 和 XSLT 进行数据交换及相关操作: 使用 XMLH

随机推荐