webpack学习笔记

一、什么是webpack

模块打包工具 ：分析项目结构，找到JS模块以及其它的一些浏览器不能直接运行的语言（less等），并将其打包为合适的格式以供浏览器使用。

二、webpack核心概念

主要有 6 部分：

• Entry : 输入入口，webpack构建第一步从这里开始
• Moudle ：一个模块对应一个文件，从entry 开始递归找到全部依赖的模块
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割
• Loader：模块转换器，将模块原内容按照需求转换成新内容
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或作你想要的事情
• Output：输出，在 Webpack 通过一系列处理并得出最终想要的代码后输出结果

三、webpack 的工做流程

项目看成一个总体，经过给定的主文件，webpack从主文件开始找到项目全部依赖的文件，再用loaders处理这些文件，最后打包为一个浏览器可识别的javascript文件。

四、执行流程

1. 递归解析 entry 依赖的全部 module；
2. 每找到一个module，根据配置的loader去找相应的转换规则；
3. 对module进行转换后再解析当前module所依赖的module；
4. 这些模块以以恶搞entry为分组，以一个entry和依赖的module就是一个chunk；
5. webpack将全部chunk 转换成文件输出，并在必定时候执行plugin逻辑。

五、配置

一、全局安装webpack

$ sudo npm install -g webpack (全局安装）

二、建立package.json文件夹

$ npm init
在终端中使用命令能够自动建立这个package.json文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，做者等信息，不过不用担忧，若是你不许备在npm中发布你的模块，这些问题的答案都不重要，回车默认便可

三、在项目中安装Webpack做为依赖包

npm install --save-dev webpack

四、建立两个文件夹

app文件夹和public文件夹，app文件夹用来存放原始数据和咱们将写的JavaScript模块，public文件夹用来存放以后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来咱们再建立三个文件:

• index.html --放在public文件夹中;
• Greeter.js-- 放在app文件夹中;
• main.js-- 放在app文件夹中;

五、在index.html中写入代码

目的在于引入打包后的js文件（这里咱们先把以后打包后的js文件命名为bundle.js）

六、在Greeter.js中写入代码

定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块

七、在main.js中写入代码

用以把Greeter模块返回的节点插入页面

八、经过配置文件使用webpack

定义一个配置文件，将全部与打包相关信息均放在配置文件中。新建webpack.config.js文件，写入配置信息，主要涉及到的内容是入口文件路径和打包后文件的存放路径。

有了这个配置以后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就能够

]

九、更快捷的执行打包任务

能够经过在package.json中对scripts对象进行相关设置便可，设置方法以下：

![图片上传中...]

配置后执行npm start便可进行快速打包

十、webpack其余强大功能

（1）source maps
source maps 提供编译文件和源文件的对应。
配置后，webpack 就能够在打包时为咱们生成source maps，这为咱们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。在webpack的配置文件中配置source maps，须要配置 devtool:

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map，可是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项能够在不影响构建速度的前提下生成完整的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具备类似的缺点；

对小到中型的项目，eval-source-map 是一个很好的选项，只应该开发阶段使用它，继续对上文新建的webpack.config.js，进行以下配置:

(2)构建本地服务器
经过构建本地服务器，可让浏览器监听代码修改，自动刷新修改后的结果，改构建基于node.js，不过它是一个单独的组件，在webpack中进行配置以前须要单独安装它做为项目依赖。

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

dev-server的配置项以下所示：

devserver的配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，若是想为另一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，若是省略，默认为”8080“
inline	设置为true，当源文件改变时会自动刷新页面
historyApiFallback	在开发单页应用时很是有用，它依赖于HTML5 history API，若是设置为true，全部的跳转将指向index.html

配置dev-server 位置在webpack.config.js中，配置添加后以下图所示：

在配置好dev-server后还须要再package.json 的 scripts 中配置运行命令，以下图所示：

(3）Loaders
经过使用不一样的loader，webpack有能力调用外部的脚本或工具，实现对不一样格式的文件的处理，好比说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders能够把React的中用到的JSX文件转换为JS文件。
Loaders 须要单独安装，且配置在webpack.config.js 中的 modules 关键字下进行配置，配置项：

• test：匹配 loaders 所处理文件的拓展名的正则表达式（必须）
• loader : loader 名称 （必须）
• include /exclude : 手动添加须要处理的文件（文件夹） 或 屏蔽不须要处理的文件（文件夹）（可选）
• query : 为loader提供额外的设置选项（可选）

(4）Babel
babel 是一个js编译平台，能够编译ES6 、ES7，也可以使用JSX等语法
安装ES6以及JSX解析包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置babel ：

（5）插件（Plugins）
插件用于扩展webpack。
plugins和loaders的区别：

• loaders 是在打包构建过程当中用来处理源文件的（JSX，Scss，Less..），一次处理一个；
• plugins 插件并不直接操做单个文件，它直接对整个构建过程其做用。

插件的使用须要用npm安装，而后在webpack配置中plugins字段下添加实例：

打包后的文件就会添加版权声明。
一些插件：

• Hot Module Replacement 容许你在修改组件代码后，自动刷新实时预览修改后的效果。
• HtmlWebpackPlugin 依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html

问题记录：

一、在安装时提示没有权限

解决：mac 电脑有权限限制，须要使用 sudo 进行安装