當剛安裝完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