webpack的使用与配置

入门webpack
一．什么是webpack，为什么要使用它？
现如今很多网页可以看作是功能丰富的应用，他们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法。
1，模块化，让我们可以把复杂的程序细化为小的文件；
2，Scss，less等预处理器。
Webpack可以看作是模块打包机，他做的事情就是，分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言，（scss，TypeScripet等），并将其转化和打包为合适的格式供浏览器使用。
二．Webpack和grunt以及gulp相比有什么特性？
其实webpack和另外两个并没有太多的可比性，gulp，grunt是一种能够优化前端开发流程的工具，而webpack是一种模块化的解决方法，不过webpack的优点使得在很多场景下可以替代gulp/grunt类的工具。
Grunt和gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等具体步骤，搞好之后可以自动替你完成这些任务

webpack的工作方式是：把你的项目当做一个整体，通过给定的主文件（如：main.js）,webpack将从这文件找到你项目所依赖的文件，使用loader处理他们，最后打包为一个或多个浏览器可以识别的JavaScript文件。

如果实在需要比较的话，webpack的处理速度更快更直接，能打包更多不同类型的文件。
三．开始学习使用webpack
安装
Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就可以安装了。
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
正式使用webpack前的准备：
1，在上述练习文件夹中创建一个package.json 文件，这是一个标准的说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等。在终端中使用npm init命令可以自动创建package.json文件
Npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题答案都不重要，回车默认即可
1,package.json文件已经就绪，我们在本项目中安装webpack作为依赖包
// 安装Webpack
npm install --save-dev webpack
1.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:
index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。

我们在Greeting.js中定义一个返回包含信息的html元素的函数，并依据CommonJS规范导出这个函数为一个模块：

Main.js文件中我们写入下述代码，用以把Greeting模块返回的节点插入页面。

通过配置文件来使用webpack
Webpack拥有很多比较高级的功能（比如loaders和plugins）,这些功能都可以通过命令行来实现，更好的方法是定义一个配置文件，这个配置文件也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。
在当前的练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的而简单的配置代码，目前主要涉及到的是入口文件路径和打包后的文件存放路径。

注释：“_dirname”是node.js中的一个全局变量，它指向当前执行脚本所在地目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack，这条命令会自动引用webpack.config.js文件中的配置选项，
更快捷的执行打包任务
对npm进行配置后可以在命令行中进行简单的npm start命令，在package.json中对scripts对象进行相关的设置即可，


Webpack的强大功能
生成Source Map(使调试更容易)
开发总是离不开调试，方便的调试能极大地提高开发效率，不过有时候通过打包后的文件是不容易找到出错的地方的，对应你写的代码位置的，Source Map就是来帮我们解决这个问题的。
通过简单的配置，webpack就可以在打包时为我们生成source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

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

把这些命令加到webpack的配置文件中，现在的配置文件

在package.json中的script对象中添加如下命令，用以开启本地服务器：

在终端输入npm run server即可在本地的8080端口查看结果
Loaders
Loaders是webpack提供的最激动人心的功能之一。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的js文件（ES6,ES7）转化为现代浏览器能够兼容的js文件，对react开发而言，合适的loaders可以把react中用到的jsx文件转化为js文件。
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几个方面：
.test:一个用以匹配loaders所处理文件的扩展名的正则表达式（必须）
Loader：loader的名称（必须）
Include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件）
Query:为loaders提供额外的设置选项（可选）
Babel
Babel其实是一个编译JavaScript的平台，他可以编译代码帮你达到以下目的：
1，让你能使用最新的JavaScript代码（ES6,ES7），而不用管新标准是否被当前使用的浏览器完全支持；
2，让你能使用基于JavaScript进行扩展了的语言，比如react的jsx；
Babel的安装与配置
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包里，webpack可以把其不同的包整合在一起使用，对于每一个需要的功能和扩展，你都需要安装单独的包（用的最多的是解析es6的babel-env-preset包和解析jsx的babel-preset-react包）。
我们先来一次性安装这些依赖包
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置Babel的方法如下：

现在你的webpack的配置已经允许你使用es6以及jsx的语法了。
Babel的配置
Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），

到目前为止，我们已经知道了，对于模块，webpack能提供非常强大的处理功能，那那些是模块能
一切皆模块
webpack有一个不可不说的有点，他把所有的文件都当做模块处理，JavaScript代码，css和fonts以及图片等等通过合适的loader都可以被处理。
Css
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
//安装
npm install --save-dev style-loader css-loader

Css预处理器
Sass和less之类的预处理器是对原生css的扩展，他们允许你使用类似于variables，nesting,mixins,inheritance等不存在于css中的特性来写css，css预处理器可以这些特殊类型的语句转化为浏览器可是别的css语句，
以下是常用的css处理loaders：

插件（plugins）
插件是用来扩展webpack功能的，他会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们是完全不同的东西，可以这么说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…）一次处理一个，插件并不直接作用于单个文件，他直接对整个构建过程起作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
使用插件的方法
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）

这就是webpack插件的基础用法了，下面给大家推荐几个常用的插件
HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的js文件的新的index.html.这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
安装
npm install --save-dev html-webpack-plugin
这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些更改：
1.移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。
2.在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码如下：

3.更新webpack的配置文件，方法同上，新建一个build文件夹用来存放最终的输出文件

再次执行npm start 你会发现，build文件夹下面生成了bundle.js和index.html.

Hot Module Replacement
Hot Module Replacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单，只需要做两项配置
1.在webpack配置文件中添加HMR插件；
2.在Webpack Dev Server中添加“hot”参数；
不过配置完这些后，JS模块其实还是不能自动热加载的，还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，但是如果是React模块，使用我们已经熟悉的Babel可以更方便的实现功能热加载。
整理下我们的思路，具体实现方法如下
Babel和webpack是独立的工具
二者可以一起工作
二者都可以通过插件拓展功能
HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，但是如果你想让它工作，需要对模块进行额外的配额；
Babel有一个叫做react-transform-hrm的插件，可以在不对React模块进行额外的配置的前提下让HMR正常工作；
还是继续上例来实际看看如何配置

安装react-transform-hmr
npm install --save-dev babel-plugin-react-transform react-transform-hmr

现在当你使用React时，可以热加载模块了,每次保存就能在浏览器上看到更新内容。
产品阶段的构建
目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。
优化插件
webpack提供了一些在发布阶段非常有用的优化插件，它们大多来自于webpack社区，可以通过npm安装，通过以下插件可以完成产品发布阶段所需的功能
OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件
我们继续用例子来看看如何添加它们，OccurenceOrder 和 UglifyJS plugins 都是内置插件，你需要做的只是安装其它非内置插件
npm install --save-dev extract-text-webpack-plugin
在配置文件的plugins后引用它们

此时执行npm run build可以看见代码是被压缩的
缓存
缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）
webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前


去除build文件中的残余文件
添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多，因此这里介绍另外一个很好用的插件clean-webpack-plugin。
安装：
cnpm install clean-webpack-plugin --save-dev
使用：
引入clean-webpack-plugin插件后在配置文件的plugins中做相应配置即可