webpack配置詳解

//引入一個包
const path = require("path");

//引入html文件
const HTMLWebpackPlugin = require("html-webpack-plugin");
//引入clean插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

//webpack中的所有的配置信息都應該寫在modul.exports中
module.exports = {
    //入口文件
    entry:"./src/index.js",

    //打包輸出的目錄
    output:{
        //打包后的文件夾路徑
        path:path.resolve(__dirname,"dist"),
        //打包后的文件名
        filename:"bundle.js"
    },

    //指令webpack打包時要使用的模塊
    module:{
        //指定要加載的規則
        rules:[
            {
                //test指定的是規則生效的文件,編寫的是正則表達式,通過正則來匹配文件
                test:/\.ts$/,   //處理以ts結尾的文件
                use:[
                    {
                      //webpack打包默認只能識別js,json
                      //loader 能將 webpack 不識別的文件編譯加載成 webpack 能識別的文件，這樣才能打包處理
                        loader:"babel-loader",
                        // 配置babel
                        options:{
                            //設置兼容的瀏覽器
                            presets:[
                                [
                                    "@babel/preset-env",//指定環境的插件
                                    {
                                        //指定代碼運行在那個瀏覽器
                                        target:{
                                            "chrome":"88",  //兼容chrome88版本
                                            "ie":"11"       //兼容ie11版本
                                        },
                                        //z指定瀏覽器的版本
                                        "corejs":"3",
                                        //瀏覽器的加載方式 usage 的方式加載
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ], //要是用的是loader加載器
                exclude:/node-modules/ //排除的文件
            }
        ]
    },
    //配置webpack插件  plugin:功能比 loader 更加強大，增強 webpack 的功能
    plugins:[
        new HTMLWebpackPlugin({
            // title:"文淵"//設置標題
            template:"./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],

    //用來設置引用模塊
    resolve:{
        extensions:['.ts','.js']
    }
}