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

 

转载于:https://www.cnblogs.com/wangking/p/11052439.html