doc

2020-11-12 21:07:26 +08:00
parent 981d157ac7
commit 832b961d34
34 changed files with 1647 additions and 18 deletions
--- a/docs/chapter1/04_webpack打包.md
+++ b/docs/chapter1/04_webpack打包.md
@@ -0,0 +1,112 @@
+# 4. 使用webpack打包TS
+
+## 下载依赖
+
+```
+yarn add -D typescript
+yarn add -D webpack webpack-cli
+yarn add -D webpack-dev-server
+yarn add -D html-webpack-plugin clean-webpack-plugin
+yarn add -D ts-loader
+yarn add -D cross-env
+```
+
+## 入口JS: src/main.ts
+
+```typescript
+// import './01_helloworld'
+
+document.write('Hello Webpack TS!')
+```
+
+## index页面: public/index.html
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>webpack & TS</title>
+</head>
+<body>
+  
+</body>
+</html>
+```
+
+## build/webpack.config.js
+
+```javascript
+const {CleanWebpackPlugin} = require('clean-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path')
+
+const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
+
+function resolve (dir) {
+  return path.resolve(__dirname, '..', dir)
+}
+
+module.exports = {
+  mode: isProd ? 'production' : 'development',
+  entry: {
+    app: './src/main.ts'
+  },
+
+  output: {
+    path: resolve('dist'),
+    filename: '[name].[contenthash:8].js'
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        include: [resolve('src')]
+      }
+    ]
+  },
+
+  plugins: [
+    new CleanWebpackPlugin({
+    }),
+
+    new HtmlWebpackPlugin({
+      template: './public/index.html'
+    })
+  ],
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  },
+
+  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
+
+  devServer: {
+    host: 'localhost', // 主机名
+    stats: 'errors-only', // 打包日志输出输出错误信息
+    port: 8081,
+    open: true
+  },
+}
+```
+
+## 配置打包命令
+
+```
+"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
+"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
+```
+
+## 运行与打包
+
+```
+yarn dev
+yarn build
+```
+
+
+