Webpack | webpack.config.js配置及基礎module、plugins打包

下載module和plugins
npm i style-loader css-loader less-loader -D
npm i html-webpack-plugin -D

/*
	要新建src、build資料夾
	在src下新建入口檔案

    loader:     1.下載  2.使用（配置loader）
    plugins：    1.下載  2.引入  3.使用
*/

const {resolve} = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
	//入口起點
    entry: './src/index.js',
    //輸出
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
            {
           		 //use陣列中loader執行順序：從右到左，從下到上，依次執行
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/\.(jpg|JPG|png)$/,
                //處理不了html中的圖片
                //下載url-loader和file-loader
                loader:'url-loader',
                options: {
                    //圖片小於8kb（一般8~12），就會被base64處理,在built.js裡變成字串形式 資料夾下不會生產相應圖片
                    //優點：減少請求數量（減輕伺服器壓力）
                    //缺點：圖片體積會更大（速度更慢）
                    limit:8*1024,
                    //可能有小問題：url-loader預設使用es6模組化解析，而html-loader引入圖片是commonjs
                    //解析時會出現 [object Module]
                    //解決：關閉url-loader的es6模組化，使用commonjs解析
                    // esModule:false,
                    
                    //給圖片進行重新命名
                    //[hash:10]取圖片前10位
                    //[ext]取檔案原來副檔名
                    name:'[hash:10].[ext]',
                }
            },
            {
                test:/\.html$/,
                //專門處理HTML檔案的img圖片（引入，從而能被url-loader處理
                loader:'html-loader'
            },
            //打包其他資源(除了HTML/js/css以外的資源)
            {
                exclude:/\.(css|js|html)$/,
                loader:'file-loader'
            }
        ]
    },
    //plugins的配置
    plugins:[
    	//html-webpack-plugin
        //功能：預設建立一個空的html 自動引入打包輸出的所有資源（js/css）
        //需求：需要有結構的HTML檔案
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    //模式
    mode:'development', //開發模式
    // mode: 'production'
}