webpack菜鸟入门

一：安装

1.如果你安装了node.js，那么打开命令行：

npm install webpack -g

2.如果你没有安装node.js，那么：

(1).打开node.js官网，下载node.js并安装

(2).重复第一种if（此处你以为会给出第二种安装方式么，并不！）

二：配置

好了，不出意外应该装好了webpack（一台机器已经造成），那么接下来就是配置了（我们需要给这个机器一些指令和参数，让它知道它应该干什么）。如果你曾经使用过grunt或者gulp,那么你对gulpfile.js/Gruntfile.js一定不陌生，对，webpack也有一个自己的配置文件 webpack.config.js，如果你没用过grunt或者gulp也没关系，这不是重点，重点是接下来的配置：

先上我自己项目的配置：

项目目录下的webpack.config.js:

一个项目所需要的基本配置都有了，其他一些功能根据项目需要而定。好了，从上往下开始介绍：

1.entry:webpack打包项目的入口文件，它告诉webpack需要从哪里开始着手打包工作，它的值分别是字符串、数组和对象

（1）绝大多数的web app，你的应用只有一个单一的入口，enter项的值你可以使用任意类型，最终输出的结果都是一样的。（以下配置都会打包成app.js）

（2）如果你想添加多个彼此不互相依赖的文件，你可以使用数组格式的值。（如下示例会以index.js为入口文件，打包后生成bundle.js，再将jquery.js文件添加到bundle.js后面）

（3）如果你需要将不同的文件打包生成不同的bundle(例如你的项目有多个html,每个html需要用到的js各不相同，需要分开打包),那么就需要用到对象类的入口配置：

这样webpack就会有3个入口文件，vendor1,vendor2和app,并打包生成vendor1.js，vendor2.js和app.js3个文件（译注1：生成的文件名由下面的output.filename的值决定，此处是"[name].js"，[name]是entry对象内的key），然后你可以在你的html文件引入你需要的那个打包生成的js文件（本例子采用的就是这种对象配置，但是并不是因为项目有多个html页面，仅仅是为了分开打包，加快打包效率，vendor1是react项目全家桶，vendor2是项目中用到的一些外部插件，app是项目js代码）

2.output:

output项告诉webpack怎样存储输出结果以及存储到哪里。

path:打包生成的文件位置（本例子会在当前目录下生成一个build文件夹，build文件夹内生成js文件夹，js文件夹呢内生成对应的js文件，注意：这里的path并不是html引用js的目录，仅仅是作为webpack编译的目录，例如你需要发布版本的时候，用webpack打包项目，此时path就作为webpack打包项目后的目录，项目打包生成的文件都在这个目录下）

filename：生成的文件名（[name]参照译注1）

publicPath:资源文件访问地址（主要是生产环境下有用，但是并不是说开发环境不需要这个，因为，你的html引用生成的js文件的路径=publicPath+filename,本例子html中引用路径如下）

3.module:在webpack中，一切皆可以看做模块，html,css,js，图片，包括其他文件。

loaders:这项配置告诉webpack，对于项目中不同的文件类型，应该怎样处理它

test：匹配文件类型

include：告诉webpack此类文件的可处理目录

exclude：告诉webpack排除此目录

loader：告诉webpack，此类型的文件应该用什么处理器去处理它

query：为上面的loader添加一些额外的选项，让loader更清晰的按照我们的需求来进行工作

presets：需要用到的套件，一般用的比较多的也就本例子中的2个。本例子中，loader会编译es2015(即es6)语法为浏览器可识别的javascript，也会编译react的jsx语法，这样你的项目中就可以用es6和react了

plugins：需要用到的插件，本例子中的插件适用于代码中有用到object-assign()语法

当然，本例子中的babel-loader也可以按照如下配置：

在和webpack.congfig.js同级目录下新建一个.babelrc文件，里面是babel-loader的配置选项，相当于上文当中的

像如下图中的写法是对url-loader的扩展的一种方式(本例子中会在处理图片等资源的时候，如果图片资源超过512kb，那么就转换成dataurl格式的图片)，可以按照项目的实际需求来选择。

4.plugins:webpack的插件项，告诉webpack除了最基本的一些打包工作之外，还需要做些什么

常用的一些插件：

代码热替换, HotModuleReplacementPlugin

生成html文件，HtmlWebpackPlugin

将css成生文件，而非内联，ExtractTextPlugin

报错但不退出webpack进程，NoErrorsPlugin

代码压缩，UglifyJsPlugin，建议在生产环境再开启

多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin

清理文件夹，Clean

调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

现在基本上一个项目所需要的最基本的webpack配置都有了，如果你还没有安装webpack-dev-server，那么：

打开cmd > 定位到项目目录下 > 输入：npm install webpack-dev-server --save-dev > 等待安装完成 > 输入命令：webpack-dev-server，默认端口为8080，如果你想修改为其他端口的话（比如想改成8888），这样：webpak-dev-server --port 8888。

好了，大概就这么多，其他的一些更丰富强大的功能可以参考webpack。

（注：本文是基于webpack 1.x，2.x版本略微有些不同，详情参考上面链接地址）