（webpack中文地址：https://www.webpackjs.com/loaders/）

1、第一步：新建一个空文件夹（此处以 webpacktwotest文件夹、vscode编辑器为例）

2、第二步：安装

1）在编辑器中打开文件夹（webpacktwotest 打开命令行快捷键Ctrl+~）

2）执行 npm -v （查看是否安装npm）

3) 安装webpack

npm install -g webpack（全局安装推荐）

npm install --save-dev webpack（局部安装 => 当前文件夹下安装 => webpacktwotest）

4）安装webpack -cli

webpack4.0版本前不用安装，webpack4.0版本后需要安装；若不安装在步骤三时执行webpack -v 会提示安装webpack-cli（>4.0版本）

原因：

<4.0版本：webpack本身和cli在一个包中

>4.0版本：已将两者分离开来更好的管理

5）执行webpack -v 查看webpack是否安装成功

6）执行命令 npm init 创建package.json文件（主要是项目（文件夹）的一些相关信息

执行命令时会问一些项目的相关信息（如：名称、作者等），若不该动默认回车即可

7）执行命令行 npm install --save-dev webpack 在项目中安装webpack作为依赖包 => 在文件夹下生成node_modules文件夹、package-lock.json文件

3、第三步：正式创建项目

1）在webpacktwotest文件夹下创建 app文件夹、public文件夹

app文件夹：用来存放我们的原始文件（包括：原始数据、我们写的JavaScript模块）

public文件夹：用来存放供浏览器读取的文件（包括：用webpack打包的js文件、index.html文件）

2）在public文件夹下创建index.html（浏览器读取文件）

3）在app文件夹下创建 index.js（作为js主入口文件）price.js（此处作为一个示例文件），

4）配置文件使用webpack用以打开项目（index.html）

1> 在根目录下新建 webpack.config.js 文件配置webpack

2> 配置package.js文件，以便更快捷的执行打包任务

执行命令： npm install --save-dev webpack-cli 在项目中安装webpack作为依赖包 => package.json文件中生成webpack-cli属性

执行命令：npm start 打包代码 => 执行成功后，打开 index.html

注:若脚本的名称不为start ，想要在命令行执行，则执行命令 npm run {script name} 如：start 换位 build 则执行命令 npm run build（为了方便看到效果，此处将 text = “使用 build 打包代码”）

注：为了表明此时项目的开发处于环境，应在webpack.config.js中配置mode => development 、production或者none

注：以上步骤使用webpack便搭建好了项目，现在就可以直接编写代码生成页面了；若果你觉得还不够，请往下接着看 webpack 其它强大的功能

4、webpack的强大功能

1> 生成 Source Maps（使调试更容易）

有的时候调试不容易找到报错的位置，而 Source Maps 却可以使你直接找到报错地址

通过简单的配置，webpack 就可以打包时为我们生成 Source Maps，使编译后的代码可读性更高，调试更容易

在 webpack 配置文件中配置 Source Maps 需要配置 devtool ，有一下四种不同的配置选项

上表：由上到下，打包速度越来越快，负面作用越来越多，

配置webpack：

2> 使用webpack构建本地服务器

构建本地服务器后，浏览器会监听代码的修改，并自动刷新页面显示修改后的结果，webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的功能，不过他是一个单独的文件，在webpack中进行配置之前需要单独安装它作为项目依赖

1》执行命令 npm install --save-dev webpack-dev-server 作为项目依赖，package.json生成 webpack-dev-server 属性

2》在webpack.config.js 文件中配置devserver

3》启动本地服务器

在package.json中 scripts 对象添加 server属性

4》查看结果执行命令 npm run server ，执行成功后，只要修改代码，页面便会实时更新

注：在写完代码后记得跑下代码（执行命令：npm start 或 npm run build,将代码打包进输出文件）

3> 创建 Babel

Babel作为编译JavaScript的平台（转译 >ES6js，相当于一个转译器），其实是一个模块化的包，可以使你：

。使用最新的JavaScript代码（ES6、ES7...），而不用考虑是否被当前浏览器支持

。使用基于JavaScript进行拓展的语言（如React 的·JSX）

babel转译器大致分为3类：

。语法转移器 这些转译器只负责转译 js 最新的语法，不负责转译 js新增的 API（如String新增的String.padStart）和全局对象（如 promise）；如：babel-preset-env、 babel-preset-es2015、babel-preset-es2016等；

。补丁转移器 这些转移器只负责转译 js 最新的 API和全局对象；如：babel-polyfill（只是简单的把 core-js和regenerate runtime包装了下，易污染全局环境）

。JSX和flow插件 这类插件用于转译 JSX语法和移除类型声明如：babel-preset-react

注：由于大多数人碰到过 polyfill 问题，这里简单讲一下 polyfill的几种使用方法：

1）使用转换插件 ：babel-plugin-transform-xxx

使用方法：

。缺什么即添加什么，在package.json添加所需的依赖 babel-plugin-transform-xxx

。在 .babelrc 中的 plugins 项配置 babel-plugin-transform-xxx插件

。代码中不需要使用require/import 引入插件， .babel 中不需要指定useBuiltIns，webpack.config.js中不需要做额外处理，一切由babel插件完成转换

优点：

。作用域是模块，避免全局冲突

。按需引入，避免不必要引入造成代码臃肿

缺点：

。每个模块内单独引用和定义 polyfill 函数，造成了重复定义，使代码产生了冗余

2）使用插件 babel-runtime 和 babel-plugin-transform-runtime

使用方法：

。package.json中添加依赖 babel-runtime 和 babel-plugin-transform-runtime

。在 .babelrc 中的 plugins 项配置 transform-runtime 插件

。直接使用，无需其它额外配置

优点：

。无全局污染

。依赖统一按需引入（ polyfill 各个模块共享），无重复引入，无多余引入

缺点：

。由于 polyfill 对象是临时构造并被 require/import引入，对象未真正挂载到全局，无法使用实例化对象的方法（如 [].include（））

3）全局 babel-polyfill（不使用 usebuiltIns属性）

使用方法：

。法1：在head 标签中引入 babel-polyfill.js

。法2：package.json 中添加依赖 babel-polyfill，在webpack配置文件增加入口（如：entry: ["babel-polyfill",'./app/index.js']），polyfill 将被打包进该入口文件并放在入口文件顶部

。法3：package.json 中添加依赖 babel-polyfill，在webpack入口文件顶部使用 require/import引入

优点：

。一次性全局解决兼容性问题

缺点：

。一次引入了 ES6 + 的所有 polyfill ，打包后的js文件体积会偏大，造成流量浪费等；

。污染全局对象，不适合框架或库的开发

4）全局 babel-polyfill（使用 babel-preset-env 插件和 usebuiltIns属性）

使用方法：

。package.json中添加依赖 babel-preset-env

。.babelrc 中的 presets 中使用 preset-env

。指定 usebuiltIns 为true

。指定浏览器环境或node环境，配置需要兼容的浏览器列表

。在webpack入口文件中使用import/require 引入 babel-polyfill

。以上配置完成后，babel 会根据指定的浏览器兼容列表自动引入所有需要的polyfill，不管你的代码中是否使用

优点：

。按照指定的浏览器环境引入，一定程度上减少了不必要的 polyfill 的引入

缺点：

。使用方式繁杂

注：全局方式下要保证 polyfill 在所有其他脚本之前执行

5）polyfill.io

根据浏览器 userAgent 自动返回合适的 polyfill

使用方法：

。直接通过CDN引入

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
https://c7sky.com/polyfill-io.html

补充：babel 最常见配置选项

。env 默认值为一个空对象，用于配置代码需要兼容的环境，如代码要在 e9+ 以上运行；配置代码兼容最新的 node

。presets 配置需要使用的转译器，由下至上调用（如与plugins同时存在，优先使用plugins）

。plugins 配置转译所需要的插件，由上至下调用（与presets同时存在时，优先使用plugins）

。ignore 忽略某些文件，默认值为 null ；忽略后即不转译该文件

。minified 是否压缩转译后的代码，默认 false

。

1》Babel安装

npm --save-dev babel-core babel转译器本身，提供babel的转译API，将 js 代码转译为 AST（抽象语法树，再通过语法转换器分析其语法后转为低版本js），使之可以直接调用 Babel 的 API 对某些代码或者某些文件进行转译，可以用来开发自己的 babel 转移器；

npm --save-dev babel-loader 加载Es5+代码，然后使用babel转译

npm --save-dev babel-preset-env 将 ES5+ 代码转译为低版本js

2》配置 .babelrc，babel的所有配置均放置在该文件中