webpack小白筆記

從來沒有自己配置過，但是好想自己啃啃它

所有代碼都在github

目錄結構

配置檔案都寫在config底下了

運作

webpack --config=config/webpack_3.config.js
           

各工具版本

• webpack 4.42.0
• node 10.16.0
• npm 6.9.0

webpack_1

主要是測試webpack的預設輸入輸出功能

entry

屬性不設定的話，webpack啟動時會去尋找./src/index.js。如果沒有此檔案會報錯

【有一點困惑，預設值是./src/index，但是如圖我的src/index和webpack_1.config.js并不是同一級，但是打包還是會打包成功生成dist檔案夾，dist跟src是一級，我把src移到webpack_1 folder裡就失敗】

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/lorry/workspace/up2/webpack'
           

output

不設定的話就會自動建立dist folder并輸出打包結果

webpack_2

測試多入口和多出口的情況

entry可以是string、array、object類型，在不設定output屬性時

• entry屬性值是string、array時，打包并生成dist/main.js
• entry屬性值是object時，不管有沒有設定output屬性都會生成相同數量的打包後的檔案

module.exports = {
    entry: {
        test1: './webpack_2/main.js',
        test2: './webpack_2/main1.js',
    },
    output: {
        path: `${absoluteRoute}/dist`,  // 必須是絕對路徑
        filename: '[name].js'
    }
}

// 生成
webpack_2/dist/test1.js  webpack_2/dist/test2.js

           

• [id]chunk id
• [name]是entry的key值
• [hash] 本次建構過程 唯一生成的hash
• [chunkhash] 基于每個chunk内容生成的hash

[hash]

如下，如果filename: ‘[name][hash].js’

[chunkhash]

webpack_3

主要用來測試以下loader以及常用屬性、typescript

• style-loader 通過import/require引用的css檔案以style标簽的方式打包到html檔案裡
• css-loader 可以在js檔案中引入css檔案
• file-loader 打封包件并輸入到指定folder
• url-loader 功能類似于file-loader。但是但是在檔案大小（機關 byte）低于指定的限制時，可以傳回一個 DataURL。大于的話預設使用file-loader處理；它不會将資源打包到output folder

使用url-loader處理後使用

使用file-loader

測試了一下url-loader的功能

有兩張圖a.png【36kb === 36864byte】 b.jpeg【83kb === 84992byte】。

loader配置如下

{
                test: /\.(png|jpe?g)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]', // 可提供function
                        outputPath: 'assets/',
                        limit: 36864, // byte
                    }
                }]
}
           

按照文檔說的圖a應該是使用url-loader處理，b使用file-loader處理

看一下請求，符合預期

oneOf

可實作對同一類型檔案使用不同loader處理，當規則比對時使用指定loader，不比對時使用其他規則

css

background: url('./assets/a.png?a') no-repeat center center;
background: url('./assets/b.jpeg') no-repeat center center;
           

loader配置

{
                test: /\.(png|jpe?g)$/,
                oneOf: [{
                    resourceQuery: /a/,   // 
                    use: 'url-loader',
                },{
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]', // 可提供function
                            outputPath: 'assets/',
                        }
                    }]
                }]
}
           

根據配置,圖a采用url-loader，b使用file-loader

處理typescript

安裝ts-loader typescript

plugins待整理~~~~

/------------接上文--------------/

plugins

webpack_4

typescript的webpack配置