Feature lazyload

build/webpack.common.js

@@ -0,0 +1,71 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const MyPlugin = require('../plugins/my-plugin')
+
+module.exports = {
+  entry: {
+    main: './src/index.js',
+    // print: './src/03/print.js',
+  },
+  output: {
+    filename: '[name].bundle.js',
+    chunkFilename: '[name].bundle.js', // 非入口文件的名称
+    path: path.join(__dirname, '../dist'),
+  },
+  resolveLoader: {
+    modules: ['node_modules', path.resolve(__dirname, '../loaders')],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/, // 语法解析的时候忽视node_modules里面的代码
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.txt$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'my-loader',
+          options: {
+            params: {
+              dd: 22,
+            },
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+              outputPath: './assets1',
+            }
+          }
+        ]
+      }
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: '管理输出',
+      template: 'public/index.html'
+    }),
+    new CleanWebpackPlugin({ verbose: true }),
+    new MyPlugin(),
+  ],
+  optimization: {
+    splitChunks: {
+      // 代码分割
+      chunks: 'all', // all是对同步和异步代码都分割，async是异步代码
+      cacheGroups: {
+        // 如果是同步代码，会走到这里，详情见文档
+        vendors: false,
+        default: false,
+      },
+    },
+  },
+}

build/webpack.dev.js

@@ -0,0 +1,29 @@
+const Webpack = require('webpack')
+const commonConfig = require('./webpack.common.js')
+const { merge } = require('webpack-merge')
+
+const devConfig = {
+  mode: 'development',
+  output: {
+    publicPath: '/ss', // 以html的路径为准
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  optimization: {
+    usedExports: true,
+  },
+  plugins: [new Webpack.HotModuleReplacementPlugin()],
+  devServer: {
+    port: 3000,
+    hot: true,
+    hotOnly: true, // 即便hmr没有生效，也不让浏览器自动刷新
+  },
+}
+
+module.exports = merge(commonConfig, devConfig)

build/webpack.prod.js

@@ -0,0 +1,28 @@
+const {merge} = require('webpack-merge')
+const commonConfig = require('./webpack.common.js')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const prodConfig = {
+  mode: 'production',
+  output: {
+    publicPath: './', // 以html的路径为准
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  optimization: {
+    usedExports: true
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].c.css'
+    })
+  ],
+
+}
+module.exports = merge(commonConfig, prodConfig)

loaders/my-loader.js

@@ -0,0 +1,9 @@
+/**
+ * @description 自定义的loader
+ */
+
+module.exports = function (txt) {
+  console.log(this.query.params.dd)
+  // return txt
+  this.callback(null, txt)
+}

md/note.md

@@ -0,0 +1,13 @@
+# webpack的一些笔记
+
+## 使用webpack、浏览器缓存
+
+因为用户在浏览页面的时候，如果此时有一个js文件发生了改变，而此时文件名没有改变，则浏览器会默认走本地缓存，还是之前的页面。
+
+解决：
+```javascript
+  // 在output中写contenthash，这样每次文件改变打包后都会生成不一样的hash值。如果没有变化则 hash 是一样的
+  output: {
+    filename: '[name].[contenthash].js'
+  }
+```

note/笔记.md

@@ -0,0 +1,39 @@
+# 笔记
+
+## publicPath
+
+- 是相对于 url 来说的，比如在 outPut 里面设置 publicPath。相当于访问打包后的文件的前缀目录，如 localhost:/index.html。
+
+```javascript
+  output: {
+    publicPath: '/', // 以html的路径为准
+  },
+
+  // 如果设置 /ss，则访问index.html都要加上/ss， localhost:/ss/index.html
+```
+
+- 如果在其他 loader 下，publicPath 表现同理, 是访问该资源的前缀目录
+
+```javascript
+  // file-loader 或者 url-loader
+  {
+    test: /\.(png|jpg|gif)$/i,
+    use: [
+      {
+        loader: 'url-loader',
+        options: {
+          limit: 8192,
+          publicPath: '/',
+          outputPath: './assets1',
+        }
+      }
+    ]
+  }
+
+  // test.js 文件中
+  import ss from '@/assets/a.png'
+  console.log(ss) // 这里会打印a.png的路径(有可能a.png会被别名替代，则显示的就是别名). 例如 assets1/a.png。
+
+  // 当设置了publicPath后，a.png的路径就是 /a.png
+
+```

package.json

@@ -2,8 +2,13 @@
   "scripts": {
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
-    "serve": "webpack-dev-server"
+    "serve:dev": "webpack-dev-server --config ./build/webpack.dev.js",
+    "serve:prod": "webpack --config ./build/webpack.prod.js",
+    "dev-build": "webpack --config ./build/webpack.dev.js"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@babel/polyfill": "^7.10.4",
@@ -16,10 +21,14 @@
     "style-loader": "^1.2.1",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.1.4"
   },
   "dependencies": {
     "core-js": "3",
-    "npx": "^10.2.2"
+    "lodash": "^4.17.20",
+    "mini-css-extract-plugin": "^0.12.0",
+    "npx": "^10.2.2",
+    "url-loader": "^4.1.1"
   }
 }

plugins/my-plugin.js

@@ -0,0 +1,11 @@
+/**
+ * @description myPlugin
+ */
+
+module.exports = class MyPlugin {
+  apply(compiler) {
+    compiler.hooks.done.tap('hello world', (s) => {
+      console.log('is done::')
+    })
+  }
+}

public/index.html

@@ -3,13 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>管理资源</title>
+    <title>管理资源1</title>
+    <style>
+      i {
+        width: 20px;
+        height: 20px;
+      }
+    </style>
   </head>
   <body>
     <i class="iconfont icon-fenlei"></i>
     <i class="iconfont icon-fanhui"></i>
     <!-- <script src="../dist/main.js"></script> -->
-    <script src="../dist/main.bundle.js"></script>
-    <script src="../dist/print.bundle.js"></script>
+    <!-- <script src="../dist/main.bundle.js"></script> -->
+    <!-- <script src="../dist/print.bundle.js"></script> -->
+    <div>sads</div>
+    <img src="" alt="" id="my-img">
   </body>
 </html>

src/04/style.css

@@ -1,5 +1,5 @@
 div:nth-of-type(odd) {
-  background: red;
+  background: green;
 }
 
 /* .mydiv {

src/05/index.js

@@ -0,0 +1,13 @@
+// tree shaking 的作用是 把未使用的代码剔除掉。只支持ES Module(动态引入), 不支持 require(静态引入)
+// 如何使用
+// 1. 在webpack.config.js 里使用optimization: {usedExports: true}
+// 2. 在package.json里面使用"sideEffects": ["*.css"]  意思是除了数组内的东西不进行tree shaking 其他都进行。
+// 在production环境下，不需要配置optimization 因为默认就有，但是要配置sideEffects
+
+export function add (a, b) {
+  return a + b
+}
+
+export function minus (a, b) {
+  return a - b
+}

src/06/index.js

@@ -0,0 +1,49 @@
+/**
+ * @description 代码分割
+ * 
+ * 为什么要代码分割？
+ * 第一种方式：
+ *  打包一个main.js文件，加载时间很长 (2Mb)
+ *  当文件修改，用户重新访问我们的页面时，又要加载2Mb的文件
+ * 
+ * 第二种方式：
+ *   main.js被拆分成 loadsh.js(1Mb), main.js(1Mb)
+ *   当业务代码更新的时候，只需要加载main.js(1Mb)
+ *   而浏览器又是并行加载js文件的
+ *   1. 增加配置项：optimization: {
+                splitChunks: {  // 同步代码分割
+                  chunks: 'all'
+                }
+              }
+     2. 异步加载库，自动代码分割。在要进行异步加载的模块中加注释，webpackChunkName:'lodash'
+ */
+
+//  同步：
+// import _ from 'lodash'
+
+// console.log(_.join([2, 5, 7, 54], '$$'))
+
+/**
+ * 异步：代码分割的一些配置
+  * optimization: {
+      splitChunks: {
+        // 代码分割
+        chunks: 'all',
+        cacheGroups: {
+          vendors: false,
+          default: false,
+        },
+      },
+    },
+ */
+function getComponent() {
+  return import(/*webpackChunkName:"loadsh.chunk"*/ 'lodash').then(({ default: _ }) => {
+    const div = document.createElement('div')
+    div.innerHTML = _.join(['a', 'b', 'c', 'd'], ' $$ ')
+    return div
+  })
+}
+
+getComponent().then((res) => {
+  document.body.appendChild(res)
+})

src/07/index.js

@@ -0,0 +1,21 @@
+/**
+ * @description 懒加载
+ */
+
+import txt from './txt.txt'
+
+function getComponent() {
+  return import(/*webpackChunkName:"loadsh.chunk"*/ 'lodash').then(({ default: _ }) => {
+    const div = document.createElement('div')
+    div.innerHTML = _.join(['a', 'b', 'c', 'd'], ' $$ ')
+    return div
+  })
+}
+
+// 只有当页面点击了后，才去加载lodash
+document.addEventListener('click', () => {
+  console.log('点击a')
+  getComponent().then((res) => {
+    document.body.appendChild(res)
+  })
+})

src/07/txt.txt

@@ -0,0 +1 @@
+console.log('xxx')

src/07/utils.js

@@ -0,0 +1,9 @@
+/**
+ * @description 工具函数
+ */
+
+export const MyFunc = function (p1) {
+  console.log(p1)
+}
+
+MyFunc()

src/08-require-import/index.js

@@ -0,0 +1,12 @@
+import logo1 from '../../assets/logo1.png'
+
+// 
+
+ const ss = () => {
+  // const logo1 = require('../../assets/logo1.png')
+  const img = document.querySelector('#my-img')
+  console.log(img, logo1)
+  img.src = logo1
+}
+
+ss()

src/08-require-import/test.js

@@ -0,0 +1,11 @@
+// export const a = '3'
+let a = 3
+
+setTimeout(() => {
+  a = 'cssss'
+  console.log('内部', a)
+}, 500)
+
+export { a }
+
+// module.exports.a = a