一、webpack 的使用

webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块

  • entry 入口文件 让webpack用哪个文件作为项目的入口
  • output 出口 让webpack把处理完成的文件放在哪里
  • module 模块 要用什么不同的模块来处理各种类型的文件

二、webpack 常用命令

webpack的使用和browserify有些类似,下面列举几个常用命令:

  • webpack          最基本的启动webpack命令
  • webpack -w    提供watch方法,实时进行打包更新
  • webpack -p    对打包后的文件进行压缩
  • webpack -d    提供SourceMaps,方便调试
  • webpack --colors     输出结果带彩色,比如:会用红色显示耗时较长的步骤
  • webpack --profile   输出性能数据,可以看到每一步的耗时
  • webpack --display-modules   默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块

前面的四个命令比较基础,使用频率会比较大,后面的命令主要是用来定位打包时间较长的原因,方便改进配置文件,提高打包效率。

三、webpack的使用通常有三种方式

  • 命令行使用:webpack <entry.js> <result.js> 其中entry.js是入口文件,result.js是打包后的输出文件
  • node.js API使用:
     var webpack = require('webpack');
    webpack({
    //configuration
    }, function(err, stats){});
  • 默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件,可以执行:webpack --config webpack.custom.config.js

四、webpack 配置文件webpack.config.js

项目中静态资源文件较多,使用配置文件进行打包会方便很多。最简单的Webpack配置文件webpack.config.js如下所示:

 module.exports = {
entry:[
'./entry.js',
...
],
output: {
path: __dirname + '/output/',
publicPath: "/output/",
filename: 'result.js'
}
};
  • 其中entry参数定义了打包后的入口文件,数组中的所有文件会打包生成一个filename文件
  • output参数定义了输出文件的位置及名字,其中参数path是指文件的绝对路径,publicPath是指访问路径,filename是指输出的文件名。

开发中需要将多个页面的公用模块独立打包,从而可以利用浏览器缓存机制来提高页面加载效率,减少页面初次加载时间,只有当某功能被用到时,才去动态的加载。这就需要使用webpack中的CommonsChunkPlugin插件。具体配置如下:

 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: { a: "./a", b: "./b" },
output: { filename: "[name].js" },
plugins: [ new CommonsChunkPlugin("common.js") ]
}

在文件中根据下面的方式引用即可。

 <script src="common.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>

五、webpack 模块加载器loader

在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都是模块,不同模块的加载是通过模块加载器(webpack-loader)来统一管理的。loaders之间是可以串联的,一个加载器的输出可以作为下一个加载器的输入,最终返回到JavaScript上。loader的配置可以写在配置文件中,通过正则表达式的方式对文件进行匹配,具体可参见下面的示例:

loader也支持在js文件中通过require的方式进行加载,只需要在require资源path的前面指定loader,用!来串联不同的loader和资源即可。

webpack使用loader的方式来处理各种各样的资源,比如说样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

使用前要先在webpack命令工具行中安装我们的loader

配置loader,在webpack.config.js中

看loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.

新建一个样式文件 main.css

记得在入口文件index.js中引用

然后发现标题变成红色的了,webpack的理念是基于项目处理的,把对应的文件格式给对应的loader处理,然后你就不用管了,它会决定怎么压缩,编译。

那现在想使用一些有爱的css预编译程序,来点sass吧。 你可能已经想到了,再来个loader就行啦,确实是这样简单。

更新 这里还需要添加node-sass来解析sass文件

稍微修改一下config,删掉我们先前添加的css规则,加上下面的loader

添加两个sass文件,variables.scss和main.scss

variables.scss

main.scss

在index.js中引用

然后发现标题如愿变红,相当简单吧。

六、css文件独立打包

在webpack中编写js文件时,可以通过require的方式引入其他的静态资源,可通过loader对文件自动解析并打包文件。通常会将js文件打包合并,css文件会在页面的header中嵌入style的方式载入页面。但开发过程中我们并不想将样式打在脚本中,最好可以独立生成css文件,以外链的形式加载。这时extract-text-webpack-plugin插件可以帮我们达到想要的效果。需要使用npm的方式加载插件,然后参见下面的配置,就可以将js中的css文件提取,并以指定的文件名来进行加载。

七、图片打包

webpack中对于图片的处理,可以通过url-loader来实现图片的压缩。它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。

安装url-loader

npm install url-loader --save-dev

配置config文件

      {
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}

注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。

针对上面的两种使用方式,loader可以自动识别并处理。根据loader中的设置,webpack会将小于指点大小的文件转化成 base64 格式的 dataUrl,其他图片会做适当的压缩并存放在指定目录中。

对于上面的配置,如果图片资源小于10kb就会转化成 base64 格式的 dataUrl,其他的图片会存放在build/文件夹下。

八、webpack-dev-server 静态资源服务器

webpack除了可以对模块进行打包,还提供了一个开发服务器。它的特点是:

  • 基于Node.js Express框架的轻量开发服务器
  • 静态资源Web服务器
  • 开发中会监听文件的变化在内存中实时打包

webpack-dev-server需要单独安装,命令如下:

可以使用webpack-dev-server直接启动,也可以增加参数来获取更多的功能,具体配置可以参见官方文档。默认启动端口8080,通过localhost:8080/webpack-dev-server/可以访问页面,文件修改后保存时会在页面头部看到sever的状态变化,并且会进行热替换,实现页面的自动刷新。

九、双服务器模式

项目开发中,仅有一台静态服务器是不能满足需求的,我们需要另启一台web服务器,且将静态服务器集成到web服务器中,就可以使用webpack的打包和加载功能。我们只需要修改一下配置文件就可以实现服务器的集成。

如果在开发中启动两个服务器并不是一个很好地选择,webpack提供了一个中间件webpack-dev-middleware,但其只能在生产环境中使用,可以实现在内存中实时打包生成虚拟文件,供浏览器访问以及调试。使用方式如下:

十、添加第三方库

有的时候还想来点jquery,moment,undersocre之类的库,webpack可以非常容易的做到这一点,有谣言说Bower即将停止开发了, 作者推荐都使用npm来管理依赖。那么我们现在安装在我们的app中添加jquery和moment的支持。

npm install jquery moment --save-dev

在js中引用

看看浏览器,成功! jquery和moment现在都起作用了!

十一、添加ES6的支持

如果现在你的项目还没有对ES6的语法支持,那就有点没有逼格了,其实大家都知道这个也很简单,因为我们有伟大的Babel

首先 装各种loader

npm install babel-loader babel-preset-es2015 --save-dev

配置我们的config文件

es2015这个参数是babel的plugin,可以支持各种最新的es6的特性,具体的情况看这个链接。 Babel es2015 plugin

现在我们可以改掉CommonJS风格的文件了。

sub.js

index.js

我们上面测试了import, export,const,let,promise等一系列es6的特性。

最后完美的输出界面。

webpack入门指南-step03的更多相关文章

  1. Webpack 入门指南 - 3. Hello, Angular2!

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

  2. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  3. Webpack 入门指南 - 1.安装

    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...

  4. 一小时包教会 —— webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  5. 【一小时入门】webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  6. webpack入门指南(基于webpack v4.41.2)

    2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...

  7. webpack入门指南(转载)

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  8. webpack 入门指南

    很久没有更博了... 这就把最近积累用到的知识点更新到这里.. 望 共勉 什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffe ...

  9. webpack入门指南-step04

    一.建立项目 建一个文件夹,然后新建一个package.json的文件在项目根目录下 如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模 ...

随机推荐

  1. 关于WebSocket长链接的详细介绍iOS

    http://www.cocoachina.com/ios/20181030/25327.html

  2. 《Python核心编程》第二版第五章答案

    本人python新手,答案自己做的,如果有问题,欢迎大家评论和讨论! 更新会在本随笔中直接更新. 5-1.整型.讲讲Python普通整型和长整型的区别. Python的标准整形类型是最通用的数字类型. ...

  3. Linux Shell常用技巧(一)

    一.    特殊文件: /dev/null和/dev/tty Linux系统提供了两个对Shell编程非常有用的特殊文件,/dev/null和/dev/tty.其中/dev/null将会丢掉所有写入它 ...

  4. macOS 开启 VNC 远程桌面和 SSH 服务

    macOS 开启 VNC 远程桌面和 SSH 服务 准备用 macOS 来做为服务器,既然是服务器,那不可缺少的是远程管理,实际上 macOS 自带 VNC 远程桌面和 SSH 服务,只是默认没有开启 ...

  5. 在线预览word

    # eg http://view.officeapps.live.com/op/view.aspx?src=<Document Location>    #demo    <a hr ...

  6. Django:表单字段如何在模板中用中文显示

    在处理中文显示的时候,刚开始接触django时,很容易弄混表单汉化和Admin后台汉化. 1.表单汉化:是针对用户的.用户浏览网页时,表单的名称如果是英文的,不够友好,所以需要显示为中文,虽然代码编写 ...

  7. C语言中关于逗号运算符的理解

    在C语言中运算符有很多,包括算数运算符.关系运算符.赋值运算符.位运算符.逻辑运算符.三目运算符.sizeof运算符.逗号运算符等等,那今天我们就重点来给大家讨论一下关于逗号运算符的一些运算规则. 首 ...

  8. 2017-2018-1 20155226 《信息安全系统设计基础》课下实践——实现mypwd

    2017-2018-1 20155226 <信息安全系统设计基础>课下实践--实现mypwd 1 学习pwd命令 输入pwd命令 发现他是给出当前文件夹的绝对路径. 于是 man 1 pw ...

  9. 20145209刘一阳《JAVA程序设计》第五周课堂测试

    第五周课堂测试 1.下列关于内部类的说法,正确的是(ABD) A .其他类不可以用某个类的内部类声明对象. B .内部类字节码文件的名字格式是"外嵌类名$内部类名". C .内部类 ...

  10. 20145226夏艺华 《Java程序设计》 课堂实践

    手速慢了一秒,泪流成河...打水印的时间用太多了 /** * Created by XiaYihua on 2017/5/31. */ import java.io.*; public class F ...