init
Change-Id: I62d8e17fdc3103133b9ddaff22c27ddd9ea9f6ac
diff --git a/scripts/webpack.base.js b/scripts/webpack.base.js
new file mode 100644
index 0000000..0bd9084
--- /dev/null
+++ b/scripts/webpack.base.js
@@ -0,0 +1,123 @@
+const { platform } = require('os')
+const path = require('path')
+const rootPath = path.resolve(__dirname, '..')
+const HtmlWebpackPlugin = require("html-webpack-plugin")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const webpack = require('webpack');
+const CircularDependencyPlugin = require('circular-dependency-plugin')
+
+
+module.exports = {
+ entry: path.resolve(__dirname, '../src/index.tsx'),
+ output: {
+ path: path.resolve(__dirname, '../dist'), // 打包后的代码放在dist目录下
+ filename: '[name].[contenthash:8].js', // 打包的文件名
+ },
+ resolve: {
+ alias: {
+ '@': path.resolve(rootPath, 'src')
+ },
+ // 配置 extensions 来告诉 webpack 在没有书写后缀时，以什么样的顺序去寻找文件
+ extensions: ['.mjs','.js', '.json', '.jsx', '.ts', '.tsx'], // 如果项目中只有 tsx 或 ts 可以将其写在最前面
+ },
+ module: {
+ rules: [
+ {
+ test: /.(jsx?)|(tsx?)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: 'iOS 9, Android 4.4, last 2 versions, > 0.2%, not dead', // 根据项目去配置
+ useBuiltIns: 'usage', // 会根据配置的目标环境找出需要的polyfill进行部分引入
+ corejs: 3, // 使用 core-js@3 版本
+ },
+ ],
+ ['@babel/preset-typescript'],
+ ['@babel/preset-react'],
+ ],
+ },
+ },
+ },
+
+ {
+ test: /\.(png|jpe?g|gif|svg|webp)$/i,
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: 25 * 1024, // 25kb
+ },
+ },
+ generator: {
+ filename: 'assets/imgs/[name].[hash:8][ext]',
+ },
+ },
+
+ {
+ test: /\.(eot|ttf|woff|woff2)$/i,
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: 25 * 1024, // 25kb
+ },
+ },
+ generator: {
+ filename: 'assets/fonts/[name].[hash:8][ext]',
+ },
+ },
+
+ {
+ test: /\.(css|less)$/,
+ use: [
+ MiniCssExtractPlugin.loader, // 使用 MiniCssExtractPlugin.loader 代替 style-loader
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ // 它可以帮助我们将一些现代的 CSS 特性，转成大多数浏览器认识的 CSS，并且会根据目标浏览器或运行时环境添加所需的 polyfill；
+ // 也包括会自动帮助我们添加 autoprefixer
+ postcssOptions: {
+ plugins: [['postcss-preset-env', {}]],
+ },
+ },
+ },
+ 'less-loader',
+ ],
+ // 排除 node_modules 目录
+ exclude: /node_modules/,
+ },
+
+ ],
+ },
+ optimization: {
+ minimizer: [
+ // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
+ `...`,
+ new CssMinimizerPlugin({
+ // 默认开启
+ // parallel true: // 多进程并发执行，提升构建速度 。 运行时默认的并发数：os.cpus().length - 1
+ }),
+ ],
+ },
+
+ plugins:[
+ new HtmlWebpackPlugin({
+ template:path.resolve(__dirname, '../public/index.html')
+ }),
+ new MiniCssExtractPlugin({
+ filename: 'assets/css/[hash:8].css', // 将css单独提测出来放在assets/css 下
+ }),
+ new CircularDependencyPlugin({
+ exclude: /node_modules/,
+ include: /src/,
+ failOnError: true,
+ allowAsyncCycles: false,
+ cwd: process.cwd(),
+ })
+ ]
+}
\ No newline at end of file
diff --git a/scripts/webpack.dev.js b/scripts/webpack.dev.js
new file mode 100644
index 0000000..bd4ebac
--- /dev/null
+++ b/scripts/webpack.dev.js
@@ -0,0 +1,21 @@
+const { merge } = require('webpack-merge')
+const base = require('./webpack.base.js')
+const webpack = require('webpack');
+
+module.exports = merge(base, {
+ mode: 'development', // 开发模式
+ devServer: {
+ historyApiFallback: true,
+ open: true, // 编译完自动打开浏览器
+ port: 8080,
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': JSON.stringify({
+ NODE_ENV: 'development', // 等价于 mode 设置
+ PUBLIC_URL: './', // 建议使用相对路径
+ API_BASE_URL: 'http://localhost:3030/api' // 添加API路径
+ })
+ }),
+ ],
+})
\ No newline at end of file
diff --git a/scripts/webpack.prod.js b/scripts/webpack.prod.js
new file mode 100644
index 0000000..0de8641
--- /dev/null
+++ b/scripts/webpack.prod.js
@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge')
+const base = require('./webpack.base.js')
+
+module.exports = merge(base, {
+ mode: 'production', // 生产模式
+})
\ No newline at end of file