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

轉自我的博客：原地址

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

• webpack入坑之旅（一）不是開始的開始

• webpack入坑之旅（二）loader入門

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

• webpack入坑之旅（四）揚帆起航

• webpack入坑之旅（五）加載vue單文件組件

在上面咱們已經嘗試過了兩種對於loader的使用方式，不管是在require的時候編寫咱們loader的前綴，仍是在咱們的命令行中進根據擴展名來自動綁定咱們的loader，顯然都不夠自動化，在須要編譯的語言繼續增長的狀況下，顯然會是一個噩夢。
因此webapck實際上爲咱們提供了一個簡單的方法，下面就一塊兒來看看。

瞭解webpack配置

Webpack在執行的時候，除了在命令行傳入參數，還能夠經過指定的配置文件來執行。默認狀況下，會搜索當前目錄的webpack.config.js文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者經過 --config 選項來指定配置文件。

因此如今咱們就來新建一個webpack.config.js，在裏面填寫進下面的內容：

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配置項：

var Webpack = require("webpack");//必須引入
module:{
},
plugins: [
    new webpack.BannerPlugin("這裏是打包文件頭部註釋！")//注意這是一個數組..
]

運行正確的話應該是這樣的，打開bundle.js，會發如今文件頭部已經有了咱們添加的註釋：

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

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

若是看到了這裏，相信你對於webpack的最基本的瞭解應該就差很少了，下面正式進入實戰的階段，來看看咱們的一些loader究竟是怎麼樣使用的。