webpack知识点

什么是webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

为什么要用webpack

1)模块化,让我们可以把复杂的程序细化为小的文件;

2)类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;

3)Scss,less等CSS预处理器

webpack优势

1. webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

2. 能被模块化的不仅仅是 JS 了。

3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

4. 扩展性强,插件机制完善,特别是支持 React 热插拔(见 react-hot-loader )的功能让人眼前一亮。

webpack特点

代码拆分:

Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

Loader:

Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

智能解析(未理解):

Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。

插件系统:

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。

快速运行:

Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。

常用的解析包及作用

解析ES6:

1)安装babel

npm install babel-core --save-dev

npm install babel-loader --save-dev

2)让翻译官拥有解析ES6语法的功能

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

3)解析es7语法

npm install babel-preset-stage-0 --save-dev

解析样式:

1)css-loader将css解析成模块,将解析的内容插入到style标签内(style-

loader)

npm install css-loader style-loader --save-dev

2)less(预处理)

npm install less less-loader --save-dev

解析图片:

1)url-loader依赖于file-loader

npm install file-loader url-loader --save-dev

解析html插件:

1)插件的作用是以我们自己的html为模板将打包后的结果,自动

引入到html中产出到dist目录下。

npm install html-webpack-plugin --save-dev

webpack-dev-server:

1)这里面内置了服务,可以帮我们启动一个端口号,当代码更 新时,可以自动打包(内存中打包),代码有变化就重新执行。

npm install webpack-dev-server --save-dev

安装后工程结构图:

webpack.config配置文件的属性

1)context:

上下文,这里省略了,默认为当前文件模块的绝对路径,下面的entry和output中的路径都是相对于context上下文的相对路径.

2)entry:

入口起点;

entry接受三种形式的值:字符串,数组和对象

单个入口文件写法:

用法:(entry:string|Array);

结构:

对象语法:

用法:entry: {[entryChunkName: string]: string|Array}

结构:

应用场景:分离 应用程序(app) 和 公共库(vendor) 入口

多个页面应用程序:

结构:

3)output:

此选项影响 compilation (编译)对象的输出。output 选项控制 webpack 如何向硬盘写入编译文件。webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:

1)filename“文件名”-->生成js的文件名,首选推荐:// main.js || bundle.js || index.js;

2)path -->对应一个绝对路径,此路径是你希望一次性打包的目录;

单个入口:

多个入口:

注:path.resolve: 接收一个相对路径,返回一个绝对路径;

4)module:

rules是module的属性,指定模块解析规则,而use是每一个rule的属性,指定要用什么loader

5)plugins:

Plugins(插件)是用来拓展webpack功能的,它们会在整个构建过程中生效,执行相关的任务。webpack有很多内置插件,同时也有很多第三方插件;

要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)

html-webpack-plugin可以为你在outpath中自动生成一个index.html文件,并插入script元素引用你打包的结果。

letHtmlWebpackPlugins= require("html-webpack-plugin");

plugins:[

newHtmlWebpackPlugin({

title:'this is main page',

template:'./src/index.js',

filename:'index.html',

/** chunks这个参数告诉插件要引用entry里面的哪几个入口 */

chunks: ['main','vendors'],

/** 要把script插入到标签里 */

inject:'body'

}),

]

易混淆点:

Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西:Loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个;插件并不直接操作单个文件,它直接对整个构建过程其作用。

WebPack和Grunt以及Gulp相比有什么特性

Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式:

在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。

Webpack的工作方式:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

对比:

Webpack的处理速度更快更直接,能打包更多不同类型的文件。

站外点:

一份相对比较完整的webpack配置文件

请复制访问:https://www.liayal.com/article/5a5d770924f2803679a960e5

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180904G1MWML00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励