窮得只剩技術

當剛安裝完Webpack

第一次執行會看到如下的訊息

 $ webpack                                                                                                                                         [23:07:04]
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

也就是他找不到 webpack.config.js 的設定檔

所以就在專案目錄下新增一個webpack.config.js

裡面的內容可以參考官方的Document

設定檔的基礎架構由幾個部分組成

entry: 程式的進入點，也就是要從哪隻檔案開始處理

可以是string，代表從某一個檔案開始

entry: "./app/entry",

也可以是array，代表這一頁有很多個檔案需要處理，但彼此之間沒有關聯

entry: ["./app/entry1", "./app/entry2"],

也可以是object，代表這個專案有多個頁面需要處理

entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
},

output: 最後的輸出，只接受object，並有filename的data

 output: {

    path: path.resolve(__dirname, "dist"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    filename: "[name].js", // for multiple entry points
    filename: "[chunkhash].js", // for long term caching
    // the filename template for entry chunks
  },

其中的[name]會跟著entry做改變

如果entry是string，[name]就是檔案名稱

如果entry是object，[name]就是object的key

[chunkhash]則是依照每個進入點所產生的hash

module: 要處理的檔案與方法

像是要讓webpack可以處理css

或是想在js裡require css檔案

就需要css-loader來處理

        module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			}
		]
	},

test 就是要處理哪種檔案

這裡是用regular expression

只要符合這樣pattern的檔名

就會做 use 裡的處理

use 是一個array

會先從最後一個element開始處理

所以遇到 xxx.css的檔案

就會先以css-loader處理

到這裡 webpack 就可以看懂 css syntax

然後再用style-loader插入進html裡

所以一個基礎的config大概會長這樣

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ['style-loader', 'css-loader'] }
        ]
    }
};

當然要用到哪些module

還是看專案會用到哪些功能了

之後再介紹課程裡有提到的module