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
            }
       }
    }
}

webpack的基本配置项的更多相关文章

  1. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  2. webpack常见的配置项

    使用vue init webpack test(项目文件夹名)命令初始化一个vue项目,cd test,然后安装依赖npm install之后会生成一些默认的文件夹和文件,这些文件和文件夹中有些和配置 ...

  3. webpack中output配置项中chunkFilename属性的用法

    chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多,都是用来将公共模块提取出来,但是用法不一样,这里主要介绍chunkFilename的 ...

  4. webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  5. webpack devServer配置项的坑

    本文所用webpack版本为4+,阅读本章的同学请注意区分. webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配 ...

  6. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  7. [转]webpack进阶构建项目(一)

    阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理 ...

  8. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  9. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

随机推荐

  1. 将已经存在的异步请求callback转换为同步promise

    由于js是单线程执行,为防止阻塞,会有很多异步回调函数callback,嵌套层次多了,可读性就差了很多.随着社区的发展,出现了promise.我们来将一些常见的回调函数做修改,变成promise的链式 ...

  2. CocosCreator检测动作执行完毕的方法~之一吧,应该= =

    解决方案是利用动作序列,在动作后面跟一个回调函数,然后再利用之前设置好的动作执行完毕标志,即可完成动作结束的判断!Bingo!

  3. java servlet简述

    概述 servlet就相当于一个java小程序,其作用主要是为了接收并响应客户端的请求 入门 1.新建工程并新建个类 2.重写servlet的方法(重要的是service方法) 3.部署工程 a.在w ...

  4. 使用python将数据写入excel

    先来个简单的例子: #!/usr/bin/python #coding=utf-8 # ======================================================== ...

  5. LOJ.6066.[2017山东一轮集训Day3]第二题(树哈希 二分)

    LOJ 被一件不愉快的小事浪费了一个小时= =. 表示自己(OI方面的)智商没救了=-= 比较显然 二分+树哈希.考虑对树的括号序列进行哈希. 那么每个点的\(k\)子树的括号序列,就是一段区间去掉距 ...

  6. Gedit —— 推荐于NOI系列考试(NOIlinux)的轻量编程环境

    由于Vim,Emacs上手艰难,Guide又特别难用,Anjuta还闪退 故推荐一款轻量化的编程环境:Gedit(文本编辑器) 配置方法: 1:在桌面上新建main.cpp,打开方式选择使用gedit ...

  7. Tomcat6,7,8的日志切割

    使用的日志切割工具cronolog(yum就可以了) 确定好路径后,开始配置 Tomcat6 Tomcat6/bin/catalina.sh 292-317行(修改两处) 修改之后为下面的内容 # t ...

  8. SpringBoot报错:Invalid bound statement (not found)

    错误原因: 没有发现Mybatis配置文件的路径 解决方法: 检查Mapper包名与xml文件标签的namespace数据名称是否相同 <mapper namespace="com.t ...

  9. SSM 框架搭建

    SSM框架搭建(Spring.SpringMVC.Mybatis) 一:基本概念 Spring :      Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框 ...

  10. 从C过渡到C++的几个知识点(结构体、引用、重载运算符)

    一.结构体和类(class) 下面一个使用结构体类型的例子 #include <iostream> using namespace std; struct Point{ // 声明Poin ...