這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack，在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表：

在上面我們已經嘗試過了兩種對於loader的使用方式，無論是在require的時候編寫我們loader的前綴，還是在我們的命令行中進根據擴展名來自動綁定我們的loader，顯然都不夠自動化，在需要編譯的語言繼續增加的情況下，顯然會是一個噩夢。
所以webapck實際上為我們提供了一個簡單的方法，下面就一起來看看。

了解webpack配置

Webpack在執行的時候，除了在命令行傳入參數，還可以通過指定的配置文件來執行。默認情況下，會搜索當前目錄的webpack.config.js

所以現在我們就來新建一個webpack.config.js，在裏面填寫進下面的內容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const webpack = require("webpack");
const path = require(‘path‘)
module.exports = {
    entry: ["./entry.js"],
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: "bundle.js"
    },
    mode: ‘development‘,
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    ‘style-loader‘,
                    ‘css-loader‘
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin("這裏是打包文件頭部註釋")
    ]
}
 

我們現在僅僅需要運行: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
7
8
9
10

/*! 這裏是打包文件頭部註釋 */
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
        /***  省略 ***/
        })

最簡單的插件使用方式就是這樣的了，就如上面一樣的，平淡無奇。

還有部分說明

如果看到了這裏，相信你對於webpack的最基本的了解應該就差不多了，下面正式進入實戰的階段，來看看我們的一些loader到底是怎麽樣使用的。

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