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