zoukankan      html  css  js  c++  java
  • 手写一个简单的webpack的配置

    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");
    
    //定义入库文件和出口文件路径
    const PATH = {
        app:path.join(__dirname,"./src/js/main.js"),
        build:path.join(__dirname,"./dist")
    }
    ///https://mapi.eyee.com/api/product/guessWhatYouLike
    //以下是webpack的配置项
    module.exports = {
        entry:{
            app:PATH.app,
        },
        output:{
            filename:"[name].js",
            path:PATH.build
        },
        module:{
            //loader的配置项
            rules:[
                {   
                    //匹配.js文件
                    test:/.js$/,
                    use:{
                        //遇到js文件用babell-loader处理
                        loader:"babel-loader",
                        options:{
                            //将ES6的代码转成ES5   遇到jsx语法的解析
                            presets:["@babel/env","@babel/react"]
                        }
                    }
                },
                {
                    test:/.(css|scss)$/,
                    use:["style-loader","css-loader","sass-loader"]
                },
                {
              test: require.resolve('zepto'),
              loader: 'exports-loader?window.Zepto!script-loader'
                }
    
            ]
        },
        //插件
        plugins:[
            //html模板
            new htmlWebpackPlugin({
                filename:"index.html",
                template:"./index.html",
                title:"斗牛",
                chunks:["app"]
            })
            
        ],
        devServer:{
            //跨域配置
            proxy:{
                "/api":{
                    target:"https://mapi.eyee.com",//目标地址
                    changeOrigin:true,
                    pathRewrite:{
                        "^/api":""
                    }
                }
            }
        }
    }
  • 相关阅读:
    程序员最艰难的十大任务
    ssh(安全外壳协议)
    数据库备份 计划任务
    计划任务 crontab
    数据库设计二
    mysql存储过程详解[转]
    Java开发必装的IntelliJ IDEA插件
    SQLYog快捷键大全
    HTTP深入浅出 http请求
    浏览器HTTP请求分析
  • 原文地址:https://www.cnblogs.com/PrayLs/p/10747513.html
Copyright © 2011-2022 走看看