webpack.config.js基础配置

webpack.config.js 文件

//node自带的获取path方法
const path =require('path');
//清除build插件
const {ClearWebpackPlugin}=require('clear-webpack-plugin')
//生成模板html插件
const HtmlWebpackPlugin=require('html-webpack-plugin)
//配置模板变量
const {DefinePlugin}=require('webpack')
//复制静态资源插件
const CopyWebpackPlugin=require('copy-webpack-plugin')

module.exports={
    //模式 开发模式打包的是未压缩文件
    mode:"development",
    
    //打包映射map文件方便调试
    devtool:"source-map",
    
    
    //入口文件
    entry:"./src/main.js",
    
    
    //出口文件
    output:{
        path:path.resolove(__dirname,"./build"),
        filename:"bundle.js"
    }
    
    
    //配合devServe热替换HMR使用
    target:"web",
    
    
    //设置为true监听文件变化会重新编译，启用devserve就要关闭此配置
    watch：true,    
    
    
    //需要安装 webpack-dev-serve
    devServe:{
        //会在src下设置的目录"/public"找引用的文件 copyWebpackPlugin 不配置也可以正常加载引用的文件
        contentBase:"/public"，
        //模块的热替换HMR不同于热加载
        hot:true,
        //主机地址默认localhost无法呗同网络其他电脑访问；如果设置0.0.0.0同网络其他电脑可以访问
        host:"loaclhost",
        //端口
        port:"8080",
        //自动打开
        open:true,
        //开启静态文件gzip压缩，不压缩html
        compress:true,
        //开发时配置代理
        proxy:{
            "/api":{
                target:"http://localhost:8888",
                //默认路径会多“/api”所以要url重写
                pathRewrite:{
                    "^/api":""
                },
                //设置false代理地址没证书也能代理成功
                secure:false,
                //如果代理服务器设置true校验也可以通过拿到数据
                changeOrigin:true
            }
        }
    },
    
    
    //模块解析
    resolve:{
        //默认设置
        modules:"node_modules",
        //模块文件默认后缀
        extensions:[".js",".json",".mjs",".wasm",".vue",".ts",".jsx",".tsx"],
        //文件夹默认查找文件
        mainFiles:["index"],
        //配置别名
        alias:{
            "@":path.resolve(__dirname,"./src"),
            "js":path.resolve(__dirname,"./src/js")
        }
    }
    
    
    //配置loader
    module：{
        rules:[
            {
                txst:/\.js$/,
                use:[
                    {loader:'babel-loader',options:{ presets:['react']}},                    
                ]
            },
            {
                txst:/\.css$/,
                use:[
                    {loader:'style-loader'}, 
                    {loader:'css-loader'},  
                    {
                        loader:'postcss-loader',
                        options:{ //可以抽离出去单独postcss.config.js
                            postcssOptions:{
                                plugins:[
                                    require('autoprefixer')
                                ]
                            }
                        }
                    },
                ]
            },
            {
                txst:/\.less$/,
                use:[
                    {loader:'style-loader'}, 
                    {loader:'css-loader'},                     
                    {loader:'less-loader'}, 
                ]
            },
        ]
    },
    
    
    //配置插件
    plugin:[
        new ClearWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            title:"首页"
        }),
        new DefinePlugin({
            BASE_URL:"'./'"
        })
        new CopyWebpackPlugin({
            parrerns:[
                {
                    form:"public",
                    to:"./",
                    globOptions:{
                        ignore:["**/index.html"]
                    }
                }
            ]
        })
        
    ]
}

.js/.vue

import App form  "./vue/App.vue"
//配置devServe热替换HMR更新
if(module.hot){
    module.hot.accept("./vue/App.vue",()=>{
        console.log("模块发生更新了")
    })
}