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