3 jaren geleden · 704c221d0a
--- a/18/.gitignore
+++ b/18/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/18/src/css/iconfont.css
+++ b/18/src/css/iconfont.css
@@ -0,0 +1,29 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id  */
			
 
				+  src: url('../media/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/18/src/css/index.less
+++ b/18/src/css/index.less
@@ -0,0 +1,7 @@
 
				+#box{

			
 
				+    width:100px;

			
 
				+    height:100px;

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

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-size:100% 100%;

			
 
				+}
			
--- a/18/src/imgs/1.jpeg
+++ b/18/src/imgs/1.jpeg
--- a/18/src/imgs/2.jpeg
+++ b/18/src/imgs/2.jpeg
--- a/18/src/imgs/3.jpeg
+++ b/18/src/imgs/3.jpeg
--- a/18/src/index.html
+++ b/18/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="./imgs/1.jpeg">

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

			
 
				+</body>

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

			
 
				+import '../css/index.less'

			
 
				+import print from './print'

			
 
				+

			
 
				+console.log('加载了index.js')

			
 
				+

			
 
				+print();

			
 
				+

			
 
				+function add(x,y){

			
 
				+    return x+y;

			
 
				+}

			
 
				+console.log(add(2,3))

			
 
				+/**

			
 
				+ * 仅支持非入口js文件

			
 
				+ */

			
 
				+if (module.hot) {

			
 
				+    module.hot.accept('./print.js', function() {

			
 
				+      console.log('Accepting the updated printMe module!');

			
 
				+      print();

			
 
				+    })

			
 
				+  }
			
--- a/18/src/js/print.js
+++ b/18/src/js/print.js
@@ -0,0 +1,5 @@
 
				+console.log('加载了print.js')

			
 
				+function print(){

			
 
				+    console.log('hello chuck122')

			
 
				+}

			
 
				+export default print;
			
--- a/18/src/media/iconfont.js
+++ b/18/src/media/iconfont.js
--- a/18/src/media/iconfont.json
+++ b/18/src/media/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/18/src/media/iconfont.ttf
+++ b/18/src/media/iconfont.ttf
--- a/18/webpack.config.js
+++ b/18/webpack.config.js
@@ -0,0 +1,72 @@
 
				+

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

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

			
 
				+/**

			
 
				+ * HMR:一个模块发生变化，只打包一个

			
 
				+ * css文件支持热更新

			
 
				+ * js默认不支持 解决：修改js代码，单独处理非入口js文件

			
 
				+ * html默认不支持（由于只有一个html文件，不需要HMR功能），且默认不热更新  解决：entry加入index.html

			
 
				+ */

			
 
				+module.exports = {

			
 
				+    entry : ['./src/js/index.js','./src/index.html'],

			
 
				+    output:{

			
 
				+        filename: 'js/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,

			
 
				+                    outputPath: 'imgs'

			
 
				+                },

			
 
				+                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,

			
 
				+                    outputPath: 'media'

			
 
				+                },

			
 
				+                type:'javascript/auto'

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

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

			
 
				+        })

			
 
				+    ],

			
 
				+    mode: 'development',

			
 
				+    devServer:{

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

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        open:true,

			
 
				+        hot:true

			
 
				+    },

			
 
				+    target: "web"     //可以解决browserslist 导致 webpack-dev-server 的自动刷新失效

			
 
				+}
			
--- a/19/.gitignore
+++ b/19/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/19/src/css/iconfont.css
+++ b/19/src/css/iconfont.css
@@ -0,0 +1,29 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id  */
			
 
				+  src: url('../media/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/19/src/css/index.less
+++ b/19/src/css/index.less
@@ -0,0 +1,7 @@
 
				+#box{

			
 
				+    width:100px;

			
 
				+    height:100px;

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

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-size:100% 100%;

			
 
				+}
			
--- a/19/src/imgs/1.jpeg
+++ b/19/src/imgs/1.jpeg
--- a/19/src/imgs/2.jpeg
+++ b/19/src/imgs/2.jpeg
--- a/19/src/imgs/3.jpeg
+++ b/19/src/imgs/3.jpeg
--- a/19/src/index.html
+++ b/19/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="./imgs/1.jpeg">

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

			
 
				+</body>

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

			
 
				+import '../css/index.less'

			
 
				+import print from './print'

			
 
				+

			
 
				+console.log('加载了index.js')

			
 
				+

			
 
				+print();

			
 
				+

			
 
				+function add(x,y){

			
 
				+    return x+y;

			
 
				+}

			
 
				+console.log(add(2,3))

			
 
				+/**

			
 
				+ * 仅支持非入口js文件

			
 
				+ */

			
 
				+if (module.hot) {

			
 
				+    module.hot.accept('./print.js', function() {

			
 
				+      console.log('Accepting the updated printMe module!');

			
 
				+      print();

			
 
				+    })

			
 
				+  }
			
--- a/19/src/js/print.js
+++ b/19/src/js/print.js
@@ -0,0 +1,5 @@
 
				+console.log('加载了print.js')

			
 
				+function print(){

			
 
				+    console.log('hello chuck122')

			
 
				+}

			
 
				+export default print;
			
--- a/19/src/media/iconfont.js
+++ b/19/src/media/iconfont.js
--- a/19/src/media/iconfont.json
+++ b/19/src/media/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/19/src/media/iconfont.ttf
+++ b/19/src/media/iconfont.ttf
--- a/19/webpack.config.js
+++ b/19/webpack.config.js
@@ -0,0 +1,76 @@
 
				+

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

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

			
 
				+

			
 
				+module.exports = {

			
 
				+    entry : ['./src/js/index.js','./src/index.html'],

			
 
				+    output:{

			
 
				+        filename: 'js/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,

			
 
				+                    outputPath: 'imgs'

			
 
				+                },

			
 
				+                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,

			
 
				+                    outputPath: 'media'

			
 
				+                },

			
 
				+                type:'javascript/auto'

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

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

			
 
				+        })

			
 
				+    ],

			
 
				+    mode: 'development',

			
 
				+    devServer:{

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

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        open:true,

			
 
				+        hot:true

			
 
				+    },

			
 
				+    target: "web",    //可以解决browserslist 导致 webpack-dev-server 的自动刷新失效

			
 
				+    /**

			
 
				+     * source-map: 外部

			
 
				+     * inline-source-map: 内联

			
 
				+     * hidden-source-map: 外部

			
 
				+     * eval-source-map: 内联

			
 
				+     * nosources-source-map: 外部

			
 
				+     * cheap-source-map: 外部

			
 
				+     * cheap-module-source-map: 外部

			
 
				+     */

			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
 
				 ## 启动http服务

			
 
				 npm start

			
 
				 

			
 
				+## webpack devServer启动

			
 
				+npx webpack serve

			
 
				+

			
 
				 ## 目录说明

			
 
				 * 01：无

			
 
				 * 02：webpack初体验

			
@@ -18,7 +21,9 @@ npm start
 
				 * 14：js压缩

			
 
				 * 15：html压缩

			
 
				 * 16：生产环境基本配置

			
 
				-* 17: 优化配置

			
 
				+* 17：优化配置

			
 
				+* 18：HMR:hot module replacement 热模块替换

			
 
				+* 19：source map 一种提供源代码到构建映射技术

			
 
				 

			
 
				 ## 关于

			
 
				 用于学习webpack配置，包括css、less、图片资源、其他资源、开发环境等配置。