zoukankan      html  css  js  c++  java
  • webpack的基本配置项

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const PATH = {
        app:path.join(__dirname,"./src/mian.js"),//设置入口文件
        build:path.join(__dirname,"./dist")//设置出口文件
    }
     
    module.exports = {
     
        entry:{
            app:PATH.app//匹配入口文件的名字
        },
        output:{//匹配出口文件的配置
            filename:"[name].js",
            path:PATH.build
        },
    //配置需要打包的模块
    module:{
        rules:[//规则是一个数组,主要是放你需要打包的模块,使用什么打包
            {
            test:/.(css|scss)$/,
            use:["style-loader","css-loader","sass-loader"]
            },
            {
            test:/.(js|jsx)$/,
            use:{
            loader:"babel-loader",
    //将ES6的代码转换为ES5的代码
            options:{
             presets:["@babel/env","@babel/react"]
            }
            },
        exclude:__dirname+"./node_modules"//排除不用打包的文件夹
            }
        ]
    },
    //插件的使用
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",//使用这个插件,可以实现文件名和渲染的文件以及ejs渲染等配置
            template:"index.html",
            title:"react"
        })
    ],
    devServer:{//跨域
        proxy:{
        "/v3":{
            target:"https://mall.api.epet.com",
            changeOrigin:true
                }
           }
        }
    }
  • 相关阅读:
    理解Linux虚拟文件系统VFS
    Linux进程间通信(IPC)
    为 区域添加 Tag
    html 模板 swig 预编译插件 grunt-swig-precompile
    如何开发 Grunt 插件
    Web开发常见的漏洞
    CSS实现不固定宽度和高度的自动居中
    Sublime Text 前端插件推荐
    JavaScript 防止事件冒泡
    HTML标签篇
  • 原文地址:https://www.cnblogs.com/xuazi-7an/p/10772606.html
Copyright © 2011-2022 走看看