标签：概念 class loader scale 全局 device 示例 dex 文件夹
1 const path = require("path"); 2 const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 4 /* 5 __dirname 当前文件夹的绝对路径 6 path.join() 将第一个参数和第二个参数进行链接 7 */ 8 9 const PATH = { 10 //入口文件 11 app:path.join(__dirname,"./src/index.js"), 12 //出口文件夹 13 build:path.join(__dirname,"./dist") 14 } 15 16 //下面的代码都是 webpack的配置项 17 module.exports = { 18 //入口 19 entry:{ 20 //这里面的key值决定了下面name的名字叫什么 21 app:PATH.app 22 }, 23 //出口 24 output:{ 25 // [name] 指的是前面的 app 26 filename:"[name].js", 27 path:PATH.build 28 }, 29 //做模块的处理 用loader进行处理 30 module: { 31 rules:[ 32 { 33 test:/\.js$/, 34 use:{ 35 loader:"babel-loader", 36 options:{ 37 presets:["@babel/env","@babel/react"] 38 } 39 } 40 }, 41 { 42 test:/\.(css|scss)$/, 43 //loader的执行顺序是从下至上 从右至左 44 use:["style-loader","css-loader","sass-loader"] 45 } 46 ] 47 }, 48 plugins:[ 49 new HtmlWebpackPlugin({ 50 //生成的文件 51 filename:"index.html", 52 //模板index.html 53 template:"./index.html", 54 /*以下为自定义的属性*/ 55 title:"小甜甜", 56 arr:["张三","李四","王五"] 57 }) 58 ] 59 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 // htmlWebpackPligin 是固定的 8 <title><%= htmlWebpackPlugin.options.title%></title> 9 </head> 10 <body> 11 12 <% for(var i=0;i<htmlWebpackPlugin.options.arr.length;i++) {%> 13 <p><%= htmlWebpackPlugin.options.arr[i]%></p> 14 <%}%> 15 16 </body> 17 </html>
标签：概念 class loader scale 全局 device 示例 dex 文件夹
原文地址：https://www.cnblogs.com/jokehl/p/9998199.html
