webpack第二堂-使用設定檔

前言

我以官方的文件來介紹webpack設定檔，希望這種方式可以讓剛接觸webpack深入淺出的明白webpack設定檔的意義和目的。

設定檔介紹

經過第一堂的介紹，我們不可能每次都使用指令的方式來打包JS檔，如果當功能複雜時或是特定的需求時，是很難用使用指令完成開發任務的，所以webpack提供設定檔(預設檔名:webpack.config.js)的方式可以讓開發者方便進行編譯

設定概念

Entry (進入文件)
首先webpack在打包時會先建立你應用程式所有使用到其他模組相依關聯的圖形，但是需要先指定圖形的進入點(entry point)，這個進入點的作用是告訴webpack從哪裡開始並且告訴他如何打包，你把進入點想成一個contextual root or the first file to kick off your app[官方翻譯].

範例1.
設定檔: webpack.config.js (webpack預設)

  module.exports = {
     entry: './app.js'
  };

語法說明: entry為設定編譯的進入文件

Output (目的檔)
當你打包JS文件時，需要告訴webpack最後產出的檔案，所以這個參數output如何用甚麼方式產出目的檔，output.path和output.filename屬性是告訴如何打包後的路徑和名稱

範例2.
設定檔: webpack.config.js (webpack預設)

const path = require('path');
module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
      }
  };

Loaders(載入器)
因為webpack只會載入.js檔，所以需要搭配loaders會將專案的檔案(.css, .html, .scss, .jpg 等)視為一個個的模組，所以loaders功能將這些檔案轉換(transform)為模組化後，讓這些檔案可以打包起來

如何在webpack.config.js配置載入器:

不同的檔案需要使用其對應的載入器，webpack才可以辨別這些檔案的格式
轉換這些檔案讓他們可以在加入相依模組的圖形

範例3:
設定檔: webpack.config.js (webpack預設)

const path = require('path');
module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
          { test: /\.txt$/, use: 'raw-loader' }
        ]
    }  
  };

文字檔: cars.txt

{"car1":"Alfa Romeo","car2":"Ferrari","car3":"Porsche"}

語法說明:
rules下面會定義兩個屬性，test和use，test解析的檔案為’*.txt’檔，use表示使用的檔入器raw-loader。

但是在執行編譯後卻出現下列的錯誤，Module not found: Error: Can’t resolve ‘raw-loader’表示沒有找到載入器，我們必須安裝載入器，才可以使用

 $ npm install --save-dev raw-loader

安裝raw-loader載入器後，就可以正常執行>node .\dist\app.bundle.js

[ 'dev1', '2222', '333' ]
{"car1":"Alfa Romeo","car2":"Ferrari","car3":"Porsche"}

Plugins(插件)
插件在webpack定義為功能的擴充，表示提供客製化的工具來讓開發更為多元化，webpack plugin system是非常強大且很客製化的特性，

範例4:
設定檔: webpack.config.js (webpack預設)

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
          { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]    
  };

語法說明: 使用插件需要三個步驟
1. 使用npm安裝插件，但如果webpack內建就不需要
2. 使用require()函式載入
3. 加入plugins陣列中

我們以HtmlWebpackPlugin來教學如何安裝，首先到webpack插件列表找到HtmlWebpackPlugin然後點入，可以找到安裝方法和使用說明這樣就完成的安裝

 $ npm install --save-dev html-webpack-plugin

結論

webpack進入點和輸出文件算是基本的操作，載入器與插件的使用是比較進階的用法，需要花點時間才可以理解，也是webpack與其他JS不同的地方。

參考文件:

無聊看看

搜尋此網誌