webpack-10

Author: yangfan19

webpack-08/README.md

@@ -43,6 +43,6 @@ loader不能做的事情Plugin都能干
 
 ## url-loader 和file-loader的区别？
 
-首先url-loader底层调取也是file-loader，小于limit字节的文件会被转为DataURl，文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader
+首先url-loader底层调取也是file-loader，小于limit字节的文件会被转为DataURl，文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader，这也是前端优化的构建的重要一环
 
 

webpack-09/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

webpack-09/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/idea
+/dist
+/es
+/lib
+
+# misc
+.idea
+.vscode
+.DS_Store
+
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webpack-09/README.md

@@ -0,0 +1,19 @@
+# webpack-09
+
+## webpack文件监听
+
+```shell
+1、启动webpack 命令时，带上 --watch 参数
+2、在配置webpack.config.js 中设置 watch:true
+```
+
+执行以下的命令、生成的文件在dist文件夹中 自己手动创建index.html 进行引入search.js
+```shell
+npm run build  
+```
+
+### 需要注意：
+  watch虽然能动态的监听文件的变化、但是浏览器的更新需要手动刷新才能生效
+
+
+

webpack-09/package-lock.json

@@ -0,0 +1,30 @@
+{
+  "name": "webpack-01",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "watch": "webpack --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.1.2",
+    "file-loader": "^6.2.0",
+    "less": "^4.1.1",
+    "less-loader": "^5.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2"
+  }
+}

webpack-09/package.json

@@ -0,0 +1,3 @@
+export function helloworld() {
+  return 'Hello webpack';
+}

webpack-09/src/fonts/KsoTouryu_5.otf

@@ -0,0 +1,3 @@
+import { helloworld } from './helloWorld';
+
+document.write(helloworld());

webpack-09/src/fonts/Ranchers-Regular.ttf

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'KsoTouryu_5';
+  src: url('./fonts/KsoTouryu_5.otf') format('truetype');
+}
+
+.box {
+  font-size: 100px;
+  color: red;
+  font-family: 'KsoTouryu_5';
+}

webpack-09/src/helloWorld.js

@@ -0,0 +1,19 @@
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// import './search.css';
+import './search01.less';
+import logo from './images/im1.jpg';
+
+const Search = () => {
+  return (
+    <div className='box'>
+      我是search组件 哈哈哈哈哈
+      <img src={logo} />
+    </div>
+  );
+};
+
+ReactDOM.render(<Search />, document.getElementById('root'));

webpack-09/src/images/Ranchers-Regular.ttf

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'Ranchers-Regular';
+  src: url('./fonts/Ranchers-Regular.ttf') format('truetype');
+}
+.box {
+  font-size: 200px;
+  color: blue;
+  font-family: 'Ranchers-Regular';
+}

webpack-09/src/images/im1.jpg

@@ -0,0 +1,47 @@
+'use strict';
+
+const path = require('path');
+
+module.exports = {
+  entry: {
+    // 入口文件可以用对象的形式来写
+    index: './src/index.js',
+    search: './src/search.js',
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js', // 多个入口的情况下 不知道对应的名称、可以用占位符来指定[name]
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        use: 'babel-loader',
+      },
+      {
+        test: /.css$/, // 配置css的后缀名
+        use: ['style-loader', 'css-loader'], //tips:执行的顺序是右到左的
+      },
+      {
+        test: /.less$/, // 配置less的后缀名
+        use: ['style-loader', 'css-loader', 'less-loader'], //tips:执行的顺序是右到左的
+      },
+      {
+        test: /.(png|jpg|gif|jpeg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 102400, // 100k
+            },
+          },
+        ],
+      },
+      {
+        test: /.(woff|woff2|eot|ttf|otf)$/,
+        use: 'file-loader',
+      },
+    ],
+  },
+};

webpack-09/src/index.js

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

webpack-09/src/search.css

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/idea
+/dist
+/es
+/lib
+
+# misc
+.idea
+.vscode
+.DS_Store
+
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webpack-09/src/search.js

@@ -0,0 +1,25 @@
+# webpack-10
+
+## 热更新：webpack-dev-server
+
+
+执行以下的命令、生成的文件在dist文件夹中 自己手动创建index.html 进行引入search.js
+```shell
+npm run build  
+```
+
+## 热更新原理
+1、webpack complie :将JS编译成Bundle
+2、HMR server: 将热更新文件输出给HMR Runtime
+3、Bundle server : 提供文件在浏览器访问
+4、HMR Runtime :会注入到浏览器更新文件的变化
+5、bundle.js 构建输出文件
+
+
+## 热更新好处
+
+热更新一般是在开发中使用调试的，输入的文件放在内存、跟watch的区别就是 watch监听是放在电脑磁盘中的、所以从构建的速度上来看的话是有优势的
+
+## 需要注意：
+
+webpack-dev-server 需要手动的安装依赖