這是一系列文章，此系列所有的練習都存在了我的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到底是怎么樣使用的。