zoukankan      html  css  js  c++  java
  • 手写webpack----O(∩_∩)O

     1 const path = require("path");
     2 const htmlWebpackPlugin = require("html-webpack-plugin");
     3 
     4 //定义入库文件和出口文件路径
     5 const PATH = {
     6     app:path.join(__dirname,"./src/js/main.js"),
     7     build:path.join(__dirname,"./dist")
     8 }
     9 ///https://mapi.eyee.com/api/product/guessWhatYouLike
    10 //以下是webpack的配置项
    11 module.exports = {
    12     entry:{
    13         app:PATH.app,
    14     },
    15     output:{
    16         filename:"[name].js",
    17         path:PATH.build
    18     },
    19     module:{
    20         //loader的配置项
    21         rules:[
    22             {   
    23                 //匹配.js文件
    24                 test:/.js$/,
    25                 use:{
    26                     //遇到js文件用babell-loader处理
    27                     loader:"babel-loader",
    28                     options:{
    29                         //将ES6的代码转成ES5   遇到jsx语法的解析
    30                         presets:["@babel/env","@babel/react"]
    31                     }
    32                 }
    33             },
    34             {
    35                 test:/.(css|scss)$/,
    36                 use:["style-loader","css-loader","sass-loader"]
    37             },
    38             {
    39           test: require.resolve('zepto'),
    40           loader: 'exports-loader?window.Zepto!script-loader'
    41             }
    42 
    43         ]
    44     },
    45     //插件
    46     plugins:[
    47         //html模板
    48         new htmlWebpackPlugin({
    49             filename:"index.html",
    50             template:"./index.html",
    51             title:"斗牛",
    52             chunks:["app"]
    53         })
    54         
    55     ],
    56     devServer:{
    57         //跨域配置
    58         proxy:{
    59             "/api":{
    60                 target:"https://mapi.eyee.com",//目标地址
    61                 changeOrigin:true,
    62                 pathRewrite:{
    63                     "^/api":""
    64                 }
    65             }
    66         }
    67     }
    68 }
  • 相关阅读:
    SVN相关
    Sublime text 2/3 中 Package Control 的安装与使用方法
    JavaScript 限制input输入类型(多种方法实现)
    yahoo的30条优化规则
    浏览器页面加载解析渲染机制(一)
    Cookies 和 Session的区别
    Post Get 区别
    Vue 学习之 关键字、关键单词
    移动H5前端性能优化指南
    『Python基础练习题』day01
  • 原文地址:https://www.cnblogs.com/wangking/p/11052439.html
Copyright © 2011-2022 走看看