webpack配置详解

Posted 2021-06-15

//引入一个包
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:[
                    {
                        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插件
    plugins:[
        new HTMLWebpackPlugin({
            // title:"文渊"//设置标题
            template:"./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],

    //用来设置引用模块
    resolve:{
        extensions:[\'.ts\',\'.js\']
    }
}