webpack配置详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:[
                    {
                        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\']
    }
}

以上是关于webpack配置详解的主要内容,如果未能解决你的问题,请参考以下文章

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli脚手架中webpack配置基础文件详解

vue-cli脚手架中webpack配置基础文件详解

webpack4.x配置详解,多页面,多入口,多出口,新特性新坑!!