3 yıl önce · a50b521e1e
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
 
				+node_modules/
			
--- a/02/.gitignore
+++ b/02/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/02/src/data.json
+++ b/02/src/data.json
@@ -0,0 +1,4 @@
 
				+{

			
 
				+    "name":"张三",

			
 
				+    "age":18

			
 
				+}
			
--- a/02/src/index.js
+++ b/02/src/index.js
@@ -0,0 +1,19 @@
 
				+/**

			
 
				+ * 入口文件

			
 
				+ * 1、运行指令：

			
 
				+ *  开发环境：webpack ./src/index.js -o ./build --mode=development

			
 
				+ * 2、生产环境：webpack ./src/index.js -o ./build --mode=production

			
 
				+ */

			
 
				+/**

			
 
				+ * 结论：

			
 
				+ *  可以处理json/js文件、可以将es6模块化编译。

			
 
				+ *  不能处理css/img等其他资源

			
 
				+ *  生产模式比开发模式多一个压缩js代码

			
 
				+ */

			
 
				+import data from './data.json'

			
 
				+console.log(data);

			
 
				+

			
 
				+function add (x,y){

			
 
				+    return x + y;

			
 
				+}

			
 
				+console.log(add(1,2));
			
--- a/03/.gitignore
+++ b/03/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/03/src/index.css
+++ b/03/src/index.css
@@ -0,0 +1,3 @@
 
				+body{

			
 
				+    background:red;

			
 
				+}
			
--- a/03/src/index.js
+++ b/03/src/index.js
@@ -0,0 +1,2 @@
 
				+import './index.css';

			
 
				+import './index.less';
			
--- a/03/src/index.less
+++ b/03/src/index.less
@@ -0,0 +1,3 @@
 
				+#title{

			
 
				+    color:grey;

			
 
				+}
			
--- a/03/webpack.config.js
+++ b/03/webpack.config.js
@@ -0,0 +1,50 @@
 
				+/**

			
 
				+ * 所有构建工具都是基于node环境，模块化默认采用common.js

			
 
				+ */

			
 
				+const {resolve}  = require('path');

			
 
				+/*common.js */

			
 
				+module.exports = {

			
 
				+    // webpack配置

			
 
				+    // 入口

			
 
				+    entry: './src/index.js',

			
 
				+

			
 
				+    // 输出

			
 
				+    output: {

			
 
				+        filename: 'built.js',

			
 
				+        // __dirname 当前文件夹

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    // loader配置 css-loader

			
 
				+    // 不同文件配置不同loader处理

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                // 匹配哪些文件

			
 
				+                test:/\.css$/,

			
 
				+                //使用哪些loader进行处理

			
 
				+                use: [

			
 
				+                    // 执行顺序：从右到左，从下到上

			
 
				+                    'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中

			
 
				+                    'css-loader'  // 将css文件变成commonjs模块加载js中，里面内容时样式字符串

			
 
				+                ]

			
 
				+            },

			
 
				+            {

			
 
				+                // 匹配哪些文件

			
 
				+                test:/\.less$/,

			
 
				+                //使用哪些loader进行处理

			
 
				+                use: [

			
 
				+                    // 执行顺序：从右到左，从下到上

			
 
				+                    'style-loader',

			
 
				+                    'css-loader',

			
 
				+                    'less-loader' // 将less文件编译成css文件, 依赖less

			
 
				+                ]

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    // plugins配置

			
 
				+    plugins:[

			
 
				+

			
 
				+    ],

			
 
				+    // 开发模式 生产模式production

			
 
				+    mode: 'development'

			
 
				+}
			
--- a/04/.gitignore
+++ b/04/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/04/src/index.html
+++ b/04/src/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <h1 id="title">hello</h1>

			
 
				+</body>

			
 
				+</html>
			
--- a/04/src/index.js
+++ b/04/src/index.js
@@ -0,0 +1,5 @@
 
				+function add(x,y){

			
 
				+    return x+y;

			
 
				+}

			
 
				+

			
 
				+console.log(add(2,3));
			
--- a/04/webpack.config.js
+++ b/04/webpack.config.js
@@ -0,0 +1,28 @@
 
				+/**

			
 
				+ * loader: 1下载 2使用

			
 
				+ * plugins：1下载 2引入 3使用

			
 
				+ */

			
 
				+const {resolve} = require('path')

			
 
				+const htmlWebpackPlugin = require('html-webpack-plugin')

			
 
				+module.exports = {

			
 
				+    entry: './src/index.js',

			
 
				+    output:{

			
 
				+        filename: 'built.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        // html-webpack-plugin

			
 
				+        // 默认创建一个空的html文件 自动引入打包输出的所有资源（js/css）

			
 
				+        // 需要有解构的html文件

			
 
				+        new htmlWebpackPlugin({

			
 
				+            // 复制该文件，并自动引入打包输出的所有资源

			
 
				+            template: './src/index.html'

			
 
				+        })

			
 
				+    ],

			
 
				+    mode:'development'

			
 
				+}
			
--- a/05/.gitignore
+++ b/05/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/05/src/1.jpeg
+++ b/05/src/1.jpeg
--- a/05/src/2.jpeg
+++ b/05/src/2.jpeg
--- a/05/src/3.jpeg
+++ b/05/src/3.jpeg
--- a/05/src/index.html
+++ b/05/src/index.html
@@ -0,0 +1,15 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <div id="box1"></div>

			
 
				+    <div id="box2"></div>

			
 
				+    <div id="box3"></div>

			
 
				+    <img src="1.jpeg">

			
 
				+</body>

			
 
				+</html>
			
--- a/05/src/index.js
+++ b/05/src/index.js
@@ -0,0 +1 @@
 
				+import './index.less';

			
--- a/05/src/index.less
+++ b/05/src/index.less
@@ -0,0 +1,21 @@
 
				+#box1{

			
 
				+    width:100px;

			
 
				+    height:100px;

			
 
				+    background-image:url('./1.jpeg');

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-size:100% 100%;

			
 
				+}

			
 
				+#box2{

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background-image:url('./2.jpeg');

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-size:100% 100%;

			
 
				+}

			
 
				+#box3{

			
 
				+    width:300px;

			
 
				+    height:300px;

			
 
				+    background-image:url('./3.jpeg');

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-size:100% 100%;

			
 
				+}
			
--- a/05/webpack.config.js
+++ b/05/webpack.config.js
@@ -0,0 +1,40 @@
 
				+const {resolve} = require('path')

			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin')

			
 
				+module.exports = {

			
 
				+    entry: './src/index.js',

			
 
				+    output:{

			
 
				+        filename: 'built.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                test: /\.less$/,

			
 
				+                use: ['style-loader','css-loader','less-loader']

			
 
				+            },

			
 
				+            {

			
 
				+                //处理图片资源

			
 
				+                test:/\.(jpeg|png|gif|jpg)$/,

			
 
				+                // 需要下载url-loader和file-loader   webpack5已弃用，添加type:'javascript/auto'可解决问题。

			
 
				+                loader: 'url-loader',

			
 
				+                options:{

			
 
				+                    // 图片大小小于8kb 就会被base64处理

			
 
				+                    // 减少请求数量 但图片体积会变大

			
 
				+                    limit: 8 * 1024,

			
 
				+                    esModule: false   // 解决[object%20Module]问题 原因：url-loader默认使用es6模块化解析，html-loader引入图片commonjs

			
 
				+                },

			
 
				+                type: 'javascript/auto'  

			
 
				+            },

			
 
				+            {

			
 
				+                test: /\.html$/,

			
 
				+                loader: 'html-loader'

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

			
 
				+            template: './src/index.html'

			
 
				+        })

			
 
				+    ],

			
 
				+    mode: 'development'

			
 
				+}
			
--- a/06/.gitignore
+++ b/06/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/06/src/iconfont.css
+++ b/06/src/iconfont.css
@@ -0,0 +1,29 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id  */
			
 
				+  src: url('iconfont.ttf?t=1628229149554') format('truetype');
			
 
				+}
			
 
				+
			
 
				+.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+.icon-banquan:before {
			
 
				+  content: "\e98b";
			
 
				+}
			
 
				+
			
 
				+.icon-anquanyinsi:before {
			
 
				+  content: "\e98c";
			
 
				+}
			
 
				+
			
 
				+.icon-dicengjiagou:before {
			
 
				+  content: "\e98d";
			
 
				+}
			
 
				+
			
 
				+.icon-cangchucangku:before {
			
 
				+  content: "\e98e";
			
 
				+}
			
 
				+
			
--- a/06/src/iconfont.js
+++ b/06/src/iconfont.js
--- a/06/src/iconfont.json
+++ b/06/src/iconfont.json
@@ -0,0 +1,37 @@
 
				+{
			
 
				+  "id": "",
			
 
				+  "name": "",
			
 
				+  "font_family": "iconfont",
			
 
				+  "css_prefix_text": "icon-",
			
 
				+  "description": "",
			
 
				+  "glyphs": [
			
 
				+    {
			
 
				+      "icon_id": "18267904",
			
 
				+      "name": "版权",
			
 
				+      "font_class": "banquan",
			
 
				+      "unicode": "e98b",
			
 
				+      "unicode_decimal": 59787
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267905",
			
 
				+      "name": "安全隐私",
			
 
				+      "font_class": "anquanyinsi",
			
 
				+      "unicode": "e98c",
			
 
				+      "unicode_decimal": 59788
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267906",
			
 
				+      "name": "底层架构",
			
 
				+      "font_class": "dicengjiagou",
			
 
				+      "unicode": "e98d",
			
 
				+      "unicode_decimal": 59789
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267907",
			
 
				+      "name": "仓储仓库",
			
 
				+      "font_class": "cangchucangku",
			
 
				+      "unicode": "e98e",
			
 
				+      "unicode_decimal": 59790
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/06/src/iconfont.ttf
+++ b/06/src/iconfont.ttf
--- a/06/src/index.html
+++ b/06/src/index.html
@@ -0,0 +1,15 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <span class="iconfont icon-banquan"></span>

			
 
				+    <span class="iconfont icon-anquanyinsi"></span>

			
 
				+    <span class="iconfont icon-anquanyinsi"></span>

			
 
				+    <span class="iconfont icon-cangchucangku"></span>

			
 
				+</body>

			
 
				+</html>
			
--- a/06/src/index.js
+++ b/06/src/index.js
@@ -0,0 +1 @@
 
				+import './iconfont.css'
			
--- a/06/webpack.config.js
+++ b/06/webpack.config.js
@@ -0,0 +1,35 @@
 
				+const {resolve} = require('path');

			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin');

			
 
				+

			
 
				+module.exports = {

			
 
				+    entry: './src/index.js',

			
 
				+    output:{

			
 
				+        filename: 'built.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                test: /\.css$/,

			
 
				+                use: ['style-loader','css-loader']

			
 
				+            },

			
 
				+            //打包其他资源 除了html js css less

			
 
				+            {

			
 
				+                exclude:/\.(css|js|html|less)$/,

			
 
				+                loader:'file-loader',

			
 
				+                options:{

			
 
				+                    esModule: false,

			
 
				+                    name: '[hash:10].[ext]'

			
 
				+                },

			
 
				+                type: 'javascript/auto'

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

			
 
				+            template: './src/index.html'

			
 
				+        })

			
 
				+    ],

			
 
				+    mode: 'development'

			
 
				+    

			
 
				+}
			
--- a/07/.gitignore
+++ b/07/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/07/src/iconfont.css
+++ b/07/src/iconfont.css
@@ -0,0 +1,29 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id  */
			
 
				+  src: url('iconfont.ttf?t=1628229149554') format('truetype');
			
 
				+}
			
 
				+
			
 
				+.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+.icon-banquan:before {
			
 
				+  content: "\e98b";
			
 
				+}
			
 
				+
			
 
				+.icon-anquanyinsi:before {
			
 
				+  content: "\e98c";
			
 
				+}
			
 
				+
			
 
				+.icon-dicengjiagou:before {
			
 
				+  content: "\e98d";
			
 
				+}
			
 
				+
			
 
				+.icon-cangchucangku:before {
			
 
				+  content: "\e98e";
			
 
				+}
			
 
				+
			
--- a/07/src/iconfont.js
+++ b/07/src/iconfont.js
--- a/07/src/iconfont.json
+++ b/07/src/iconfont.json
@@ -0,0 +1,37 @@
 
				+{
			
 
				+  "id": "",
			
 
				+  "name": "",
			
 
				+  "font_family": "iconfont",
			
 
				+  "css_prefix_text": "icon-",
			
 
				+  "description": "",
			
 
				+  "glyphs": [
			
 
				+    {
			
 
				+      "icon_id": "18267904",
			
 
				+      "name": "版权",
			
 
				+      "font_class": "banquan",
			
 
				+      "unicode": "e98b",
			
 
				+      "unicode_decimal": 59787
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267905",
			
 
				+      "name": "安全隐私",
			
 
				+      "font_class": "anquanyinsi",
			
 
				+      "unicode": "e98c",
			
 
				+      "unicode_decimal": 59788
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267906",
			
 
				+      "name": "底层架构",
			
 
				+      "font_class": "dicengjiagou",
			
 
				+      "unicode": "e98d",
			
 
				+      "unicode_decimal": 59789
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267907",
			
 
				+      "name": "仓储仓库",
			
 
				+      "font_class": "cangchucangku",
			
 
				+      "unicode": "e98e",
			
 
				+      "unicode_decimal": 59790
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/07/src/iconfont.ttf
+++ b/07/src/iconfont.ttf
--- a/07/src/index.html
+++ b/07/src/index.html
@@ -0,0 +1,15 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <span class="iconfont icon-banquan"></span>

			
 
				+    <span class="iconfont icon-anquanyinsi"></span>

			
 
				+    <span class="iconfont icon-anquanyinsi"></span>

			
 
				+    <span class="iconfont icon-cangchucangku"></span>

			
 
				+</body>

			
 
				+</html>
			
--- a/07/src/index.js
+++ b/07/src/index.js
@@ -0,0 +1 @@
 
				+import './iconfont.css'
			
--- a/07/webpack.config.js
+++ b/07/webpack.config.js
@@ -0,0 +1,47 @@
 
				+const {resolve} = require('path');

			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin');

			
 
				+

			
 
				+module.exports = {

			
 
				+    entry: './src/index.js',

			
 
				+    output:{

			
 
				+        filename: 'built.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                test: /\.css$/,

			
 
				+                use: ['style-loader','css-loader']

			
 
				+            },

			
 
				+            //打包其他资源 除了html js css

			
 
				+            {

			
 
				+                exclude:/\.(css|js|html|less)$/,

			
 
				+                loader:'file-loader',

			
 
				+                options:{

			
 
				+                    esModule: false,

			
 
				+                    name: '[hash:10].[ext]'

			
 
				+                },

			
 
				+                type: 'javascript/auto'

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

			
 
				+            template: './src/index.html'

			
 
				+        })

			
 
				+    ],

			
 
				+    mode: 'development',

			
 
				+

			
 
				+    //开发服务器 devServer

			
 
				+    //只会再内存中编译，不会有任何输出

			
 
				+    //启动指令 npx webpack serve

			
 
				+    devServer:{

			
 
				+        contentBase: resolve(__dirname, 'build'),

			
 
				+        // 启动gzip压缩

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        // 自动打开浏览器

			
 
				+        open:true

			
 
				+    }

			
 
				+    

			
 
				+}
			
--- a/08/.gitignore
+++ b/08/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/08/src/1.jpeg
+++ b/08/src/1.jpeg
--- a/08/src/2.jpeg
+++ b/08/src/2.jpeg
--- a/08/src/3.jpeg
+++ b/08/src/3.jpeg
--- a/08/src/iconfont.css
+++ b/08/src/iconfont.css
@@ -0,0 +1,29 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id  */
			
 
				+  src: url('iconfont.ttf?t=1628229149554') format('truetype');
			
 
				+}
			
 
				+
			
 
				+.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+.icon-banquan:before {
			
 
				+  content: "\e98b";
			
 
				+}
			
 
				+
			
 
				+.icon-anquanyinsi:before {
			
 
				+  content: "\e98c";
			
 
				+}
			
 
				+
			
 
				+.icon-dicengjiagou:before {
			
 
				+  content: "\e98d";
			
 
				+}
			
 
				+
			
 
				+.icon-cangchucangku:before {
			
 
				+  content: "\e98e";
			
 
				+}
			
 
				+
			
--- a/08/src/iconfont.js
+++ b/08/src/iconfont.js
--- a/08/src/iconfont.json
+++ b/08/src/iconfont.json
@@ -0,0 +1,37 @@
 
				+{
			
 
				+  "id": "",
			
 
				+  "name": "",
			
 
				+  "font_family": "iconfont",
			
 
				+  "css_prefix_text": "icon-",
			
 
				+  "description": "",
			
 
				+  "glyphs": [
			
 
				+    {
			
 
				+      "icon_id": "18267904",
			
 
				+      "name": "版权",
			
 
				+      "font_class": "banquan",
			
 
				+      "unicode": "e98b",
			
 
				+      "unicode_decimal": 59787
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267905",
			
 
				+      "name": "安全隐私",
			
 
				+      "font_class": "anquanyinsi",
			
 
				+      "unicode": "e98c",
			
 
				+      "unicode_decimal": 59788
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267906",
			
 
				+      "name": "底层架构",
			
 
				+      "font_class": "dicengjiagou",
			
 
				+      "unicode": "e98d",
			
 
				+      "unicode_decimal": 59789
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "18267907",
			
 
				+      "name": "仓储仓库",
			
 
				+      "font_class": "cangchucangku",
			
 
				+      "unicode": "e98e",
			
 
				+      "unicode_decimal": 59790
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/08/src/iconfont.ttf
+++ b/08/src/iconfont.ttf
--- a/08/src/index.html
+++ b/08/src/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <span class="iconfont icon-banquan"></span>

			
 
				+    <span class="iconfont icon-anquanyinsi"></span>

			
 
				+    <span class="iconfont icon-anquanyinsi"></span>

			
 
				+    <span class="iconfont icon-cangchucangku"></span>

			
 
				+    <img src="./1.jpeg">

			
 
				+    <div id="box"></div>

			
 
				+</body>

			
 
				+</html>
			
--- a/08/src/index.js
+++ b/08/src/index.js
@@ -0,0 +1,7 @@
 
				+import './iconfont.css'

			
 
				+import './index.less'

			
 
				+

			
 
				+function add(x,y){

			
 
				+    return x+y;

			
 
				+}

			
 
				+console.log(add(2,3))
			
--- a/08/src/index.less
+++ b/08/src/index.less
@@ -0,0 +1,7 @@
 
				+#box{

			
 
				+    width:100px;

			
 
				+    height:100px;

			
 
				+    background-image:url('./2.jpeg');

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-size:100% 100%;

			
 
				+}
			
--- a/08/webpack.config.js
+++ b/08/webpack.config.js
@@ -0,0 +1,63 @@
 
				+

			
 
				+const {resolve} = require('path');

			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin');

			
 
				+

			
 
				+module.exports = {

			
 
				+    entry : './src/index.js',

			
 
				+    output:{

			
 
				+        filename: 'built.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            //less

			
 
				+            {

			
 
				+                test:/\.less$/,

			
 
				+                use:['style-loader','css-loader','less-loader']

			
 
				+            },

			
 
				+            //css

			
 
				+            {

			
 
				+                test:/\.css$/,

			
 
				+                use:['style-loader','css-loader']

			
 
				+            },

			
 
				+            //图片

			
 
				+            {

			
 
				+                test: /\.(jpg|jpeg|png|gif)$/,

			
 
				+                loader: 'url-loader',

			
 
				+                options:{

			
 
				+                    limit:8*1024,

			
 
				+                    name:'[hash:10].[ext]',

			
 
				+                    esModule:false

			
 
				+                },

			
 
				+                type:'javascript/auto'

			
 
				+            },

			
 
				+            //html

			
 
				+            {

			
 
				+                test:/\.html$/,

			
 
				+                loader: 'html-loader'

			
 
				+            },

			
 
				+            //其他

			
 
				+            {

			
 
				+                exclude:/\.(html|js|css|less|jpg|jpeg|png|gif)$/,

			
 
				+                loader:'file-loader',

			
 
				+                options:{

			
 
				+                    name:'[hash:10].[ext]',

			
 
				+                    esModule:false

			
 
				+                },

			
 
				+                type:'javascript/auto'

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

			
 
				+            template:'./src/index.html'

			
 
				+        })

			
 
				+    ],

			
 
				+    mode: 'development',

			
 
				+    devServer:{

			
 
				+        contentBase:resolve(__dirname,'build'),

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        open:true

			
 
				+    }

			
 
				+}
			
--- a/READE.MD
+++ b/READE.MD
@@ -0,0 +1,11 @@
 
				+##启动http服务

			
 
				+npm start

			
 
				+##目录说明

			
 
				+01：无

			
 
				+02：webpack初体验

			
 
				+03：打包样式资源

			
 
				+04: 打包html文件

			
 
				+05：打包图片资源

			
 
				+06：打包其他资源

			
 
				+07: devserver

			
 
				+08： 开发环境搭建

			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,18 @@
 
				+{
			
 
				+  "scripts": {
			
 
				+    "start": "http-server -a 127.0.0.1 -p 7070"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "css-loader": "^6.2.0",
			
 
				+    "file-loader": "^6.2.0",
			
 
				+    "html-loader": "^2.1.2",
			
 
				+    "html-webpack-plugin": "^5.3.2",
			
 
				+    "less": "^4.1.1",
			
 
				+    "less-loader": "^10.0.1",
			
 
				+    "style-loader": "^3.2.1",
			
 
				+    "url-loader": "^4.1.1",
			
 
				+    "webpack": "^5.48.0",
			
 
				+    "webpack-cli": "^4.7.2",
			
 
				+    "webpack-dev-server": "^3.11.2"
			
 
				+  }
			
 
				+}