任务一 webpack实现ts项目打包

e0f22ffd · yxm · e0f22ffd · e0f22ffd · e0f22ffd · e0f22ffd
Commit e0f22ffd authored Nov 10, 2022 by yxm
12 changed files
--- a/.gitignore
+++ b/.gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/dist
--- a/README.md
+++ b/README.md
+## 任务一
+### 实现思路
+依据webpack基本配置项完成,实现将ts/tsx的开发环境配置完成,并且配置比较基础的热更新,以及常见的优化构建速度配置
+总结:以前开发基本不关注打包、开发配置项,通过阅读文档对webpack也算是一个重新的认识,加强对node的认知,今后的职业中也会注重这方面的技术状态
+#### 下载依赖
+npm i 
+#### 启动命令
+npm run dev
+#### 打包命令
+npm run build
--- a/build/webpack.base.js
+++ b/build/webpack.base.js
+const path = require('path')//导入path模块
+const HtmlWebpackPlugin = require('html-webpack-plugin')//导入静态html
+module.exports = {
+  //打包文件出口
+  entry: path.join(__dirname, '../src/index.tsx'),
+  //打包文件出口
+  output: {
+    filename: 'static/js/[name].js', //输出js的名称
+    path: path.join(__dirname, '../dist'), //生成dist文件位置
+    clean: true, //每次build制空dist文件
+    publicPath: '/'
+  },
+  //配置babel解析ts/tsx
+  module: {
+    rules: [
+      {
+        test: /.(ts|tsx)$/,
+        use: {
+          loader: 'babel-loader',//配置babel解析
+          options: {
+            //由右往左,所以先处理ts,再处理jsx
+            presets: [
+              '@babel/preset-react',
+              '@babel/preset-typescript'
+            ]
+          }
+        }
+      }
+    ]
+  },
+  // 默认导入文件后缀优先级
+  resolve: {
+    extensions: ['.js', '.tsx', '.ts'],//由于插件默认很多js后缀,js文件优先
+  },
+  //构建静态html取定义root节点的模板
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, '../public/index.html'),
+      inject: true,
+    })
+  ]
+}
\ No newline at end of file
--- a/build/webpack.dev.js
+++ b/build/webpack.dev.js
+//开发模式
+const path = require('path')//导入path模块
+const { merge } = require('webpack-merge')//导入合并基础配置merge
+const baseConfig = require('./webpack.base.js')//导入公共base
+
+//合并公共base,并添加开发环境配置
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  devServer: {
+    port: 4444, //端口号
+    compress: false, //提升热更新速度
+    hot: true, //热更新
+    // historyApiFallback: true, // 解决history路由404问题
+    static: {
+      directory: path.join(__dirname, "../public"),//托管静态资源index.html
+    }
+  }
+})
\ No newline at end of file
--- a/build/webpack.prod.js
+++ b/build/webpack.prod.js
+//产品模式
+const { merge } = require('webpack-merge')//导入合并基础配置merge
+const baseConfig = require('./webpack.base.js')//导入公共base
+module.exports = merge(baseConfig, {
+  mode: 'production',
+})
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "init",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server -c build/webpack.dev.js",
+    "build": "webpack -c build/webpack.prod.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "babel-loader": "^9.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
+<!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>webpack打包ts项目</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
\ No newline at end of file
--- a/src/App.tsx
+++ b/src/App.tsx
+import React from 'react'
+import useInclude from './hooks/useInclude'
+function App() {
+  // const {change,text} = useInclude()
+  // return <h2>webpack打包{text()}项目<button onClick={change}>点击</button></h2>
+  return <h1>webpack打包</h1>
+}
+export default App
\ No newline at end of file
--- a/src/hooks/useInclude.ts
+++ b/src/hooks/useInclude.ts
+import { useState } from 'react'
+export default function event (){
+    const [flag,setFlag] = useState<boolean>(false)
+    const text = ()=>{
+        return flag?"ts":"tsx"
+    }
+    const change =()=>{
+        setFlag(!flag)
+    }
+    return {
+        text,
+        change
+    }
+}
\ No newline at end of file
--- a/src/index.tsx
+++ b/src/index.tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if(root) {
+  createRoot(root).render(<App />)
+}
\ No newline at end of file
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "lib": ["DOM", "DOM.Iterable", "ESNext"],
+      "allowJs": false,
+      "skipLibCheck": false,
+      "esModuleInterop": false,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+      "jsx": "react", // react18这里也可以改成react-jsx
+    },
+    "include": ["./src"]
+  }
\ No newline at end of file