webpack入坑之旅（三）webpack.config入门

这是一系列文章，此系列全部的练习都存在了个人github仓库中vue-webpack，在本人有了新的理解与认识以后,会对文章有不定时的更正与更新。下面是目前完成的列表：

• webpack入坑之旅（一）不是开始的开始
• webpack入坑之旅（二）loader入门
• webpack入坑之旅（三）webpack.config入门
• webpack入坑之旅（四）扬帆起航
• webpack入坑之旅（五）加载vue单文件组件
• webpack入坑之旅（六）配合vue-router实现SPA

在上面咱们已经尝试过了两种对于loader的使用方式，不管是在require的时候编写咱们loader的前缀，仍是在咱们的命令行中进根据扩展名来自动绑定咱们的loader，显然都不够自动化，在须要编译的语言继续增长的状况下，显然会是一个噩梦。
因此webapck实际上为咱们提供了一个简单的方法，下面就一块儿来看看。

了解webpack配置

Webpack在执行的时候，除了在命令行传入参数，还能够经过指定的配置文件来执行。默认状况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者经过 --config 选项来指定配置文件。

因此如今咱们就来新建一个webpack.config.js，在里面填写进下面的内容：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var Webpack = require("webpack"); module.exports = { entry: [ "./entry.js"], output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [{ test: /\.css$/, loader: "style!css" }] } }

咱们如今仅仅须要运行:webpack，若是你的配置没有问题的话，能够在命令行中看到正确的输出，由于这个命令会自动在当前目录中查找webpack.config.js的配置文件，并按照里面定义的规则来进行执行。

去修改咱们的css文件吧，感觉一下它的便利。

上面咱们仅仅是使用了这个配置文件，咱们确定想在实际的工做环境中，自我对于项目进行针对性的配置。下面咱们就先来简单的了解一下里面参数的意义：

• entry：指入口文件的配置项，它是一个数组的缘由是webpack容许多个入口点。 固然若是你只有一个入口的话，也能够直接使用双引号"./entry.js"
• output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
• module：定义了对模块的处理逻辑，这里能够用loaders定义了一系列的加载器，以及一些正则。当须要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的缘由。

在这里仅仅能作一些很简单的介绍，若是想要真正作到在项目中的实际应用，还须要大量的练习与尝试。在此暂时不作过多的探究。等真正用到了再记录下来。

了解webpack插件

下面就来看看webpack中的插件：

插件能够完成更多loader不能完成的功能。插件的使用通常是在webpack.config.js中的plugins 选项中指定。

Webpack自己内置了一些经常使用的插件，还能够经过npm安装第三方插件。

接下来，咱们从一个最简单的，用来给输出的文件头部添加注释信息BannerPlugin的内置插件来实践插件的配置和运行。

修改webpack.config.js，添加 plugins配置项：

1 2 3 4 5 6

var Webpack = require("webpack");//必须引入 module:{ }, plugins: [ new Webpack.BannerPlugin("这里是打包文件头部注释！")//注意这是一个数组.. ]

运行正确的话应该是这样的，打开bundle.js，会发如今文件头部已经有了咱们添加的注释：

1 2 3 4 5 6

/*! 这里是打包文件头部注释 */ /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /*** 省略 ***/ })

最简单的插件使用方式就是这样的了，就如上面同样的，平淡无奇。

若是看到了这里，相信你对于webpack的最基本的了解应该就差很少了，下面正式进入实战的阶段，来看看咱们的一些loader究竟是怎么样使用的。