webpack Loader

file-loader

可以處理理 file-loader 所有的事情，但是遇到圖片格式的模塊，可以選擇性的把圖片轉成 base64
格式的字符串，並打包到 js 中，對小體積的圖片較合適，大圖不合適。
安裝指令

 npm install --save-dev url-loader

使用

  module:{// 
	rules: [
	            {
                test: /\.(png|jpe?g|gif)$/,
                use: {
                  loader: "url-loader",
                  options: {
                    // placeholder 佔位符 [name] 源資源模塊的名稱
                    // [ext] 源資源模塊的後綴
                    // name: "[name]_[hash].[ext]",
                    //打包後的存放位置
                    outputPath: "./images",
                    // 打包後文件的 url
                    publicPath: './dist/images',
                    // 小於 1000000字節轉成 base64 格式 大小時自己定的
                    limit: 1000000,
                  }
                }
            },
		]
}

css-loader

分析 css 模塊之間的關係，併合成 css

npm install --save-dev css-loader

style-loader

把 css-loader 生成的內容，用 style 標籤掛載到頁面的 head 中

npm install --save-dev style-loader

           {
                test: /\.css$/,
                use:['style-loader',
                {loader:"css-loader",
                options:{
                    // 禁用url處理
                    url:false
                }    
                }]
            }

注意這裏作爲舉例，官網還有很多內容，使用方法都類似