React+TypeScript+webpack4多入口配置详解

├── dist # 打包结果目录
│  ├── demo1 //类别demo1的打包结果
│  │  ├── demo1.himl
│  │  ├── demo1.js
│  │  └── demo1.css
│  └── demo2 ... //类别demo2的打包结果
├── src # 业务资源文件目录
│  ├── category //项目分类
│  │  ├── demo1
│  │  ├── demo2
│  │  └── ...
│  ├── components //公共组件
│  ├── util //公共资源
│  └── custom.d.ts //项目全局变量声明文件
├── index.html //项目启动入口
├── .gitignore //git忽略文件
├── .eslintrc.js //eslint校验配置
├── package.json //依赖包
├── tsconfig.json //ts配置
├── webpack.config.build.js //webpack打包
├── webpack.config.base.js //webpack基础配置
└── webpack.config.js //项目启动配置

npm install -g typescript

mkdir tsDemo && cd tsDemo

npm init -y && tsc --init

npm install-D webpack webpack-cli webpack-dev-server

npm install -S react react-dom
npm install -D @types/react @types/react-dom

npm install -D ts-loader

touch webpack.config.base.js webpack.config.build.js webpack.config.js

const fs = require("fs");
const path = require("path");
const optimist = require("optimist");

const cateName = optimist.argv.cate;
let entryObj = {};
const srcPath = `${__dirname}/src`;
//获取当前项目要启动或者打包的基础路径
const entryPath = `${srcPath}/category/`;
//未指定类别 启动或者打包所有类别
//如：npm run dev 或者npm run build
if (cateName == true) {
  fs.readdirSync(entryPath).forEach((cateName, index) => {
    // cateName/cateName指定输出路径为entryname
    if (cateName != "index.html" && cateName != ".DS_Store") entryObj[`${cateName}/${cateName}`] = `${entryPath + cateName}/${cateName}.tsx`;
  });
} else if (cateName.indexOf(",")) {
  // 一次指定多个类别 类别之间以","分割
  //如：npm run dev erhsouche,huoche 
  let cateNameArray = cateName.split(",");
  for (let i = 0; i < cateNameArray.length; i++) {
    entryObj[`${cateNameArray[i]}/${cateNameArray[i]}`] = `${entryPath + cateNameArray[i]}/${
      cateNameArray[i]
    }.tsx`;
  }
} else {
  // 打包单个入口文件
  //如：npm run dev ershouche
  entryObj[`${cateName}/${cateName}`] = `${entryPath + cateName}/${cateName}.tsx`;
}
const webpackConfig = {
  entry: entryObj,
}
module.exports = {
  webpackConfig,
  entryObj
};

const webpackConfig = {
  output: {
    //输出文件名称以当前传入的cate类别名称命名
    filename: "[name].js", 
    //输出到根目录下的dist目录中
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },
}

const webpackConfig = {
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx", ".json"],
    //配置项通过别名来把原导入路径映射成一个新的导入路径。
    alias: {
      images: path.join(__dirname, "src/util/img")
    },
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    modules: [path.resolve(__dirname, "node_modules")] 
  },
}

npm install ts-loader -D

npm install url-loader -D

const webpackConfig = {
  module: {
    rules: [
      //处理tsx文件
      { test: /\.(tsx|ts)?$/, use: ["ts-loader"], include: path.resolve(__dirname, "src") },
      //处理图片资源
      {
        test: /\.(png|jpe?g|jpg|gif|woff|eot|ttf|svg)/,
        use: [
          // 对非文本文件采用file-loader加载
          {
            loader: "url-loader",
            options: {
              limit: 1024 * 30, // 30KB以下的文件
              name: "images/[name].[hash:8].[ext]",
            }
          }
        ],
      },
      //处理css和scss
      {
        test: /\.(css|scss)$/,
        use: [
          //css单独打包
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")],
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-resources-loader",
            options: {
              resources: ["./skin/mixin.scss", "./skin/base.scss"]
            }
          }
        ],
        exclude: path.resolve(__dirname, "node_modules")
      },
      {
        test: /\.html$/,
        use: {
          loader: "html-loader",
        }
      },
      { test: /src\/containers(\/.*).(tsx|ts)/, loader: "bundle-loader?lazy!ts-loader" },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },
}

const webpackConfig = {
  plugins: [
    //清除文件
    new CleanWebpackPlugin(),
    //css单独打包
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].css"
    }),
    // 引入热更新插件
    new webpack.HotModuleReplacementPlugin() 
  ]
}

const webpackConfig = {
  //项目编译打包是忽略这些依赖包
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
    "react-redux": "ReactRedux",
  }
}

const webpackConfig = {
  devServer: {
    // 本地服务器所加载的页面所在的目录
    contentBase: srcPath, 
    //热更新
    hot: true,
    //服务端口
    port: "7788",
    // 是否向Chunk中注入代理客户端，默认注入
    inline: true, 
    // publicPath: '/dist/',
    historyApiFallback: {
      index: "template.html",
    },
    //默认检查hostname
    disableHostCheck: true,
    compress: true,
    open: true // 自动打开首页
  }
}