webpack构建多页面react项目（webpack+typescript+react）

module.exports = {
    page2: {
        title: "hello world!",tpl: "index"
      }
};

module.exports = {
    page1: {
      title: "hello world!",tpl: "index"
    },page2: {
      title: "hello world!",tpl: "index"
    }
  };
  

npm init

{
  "name": "react-demo","version": "1.0.0","description": "react+typescript+webpack项目","private": true,//设置为true，那么npm将拒绝发布它，防止私人存储库意外发布
  "scripts": {      // 自定义脚本，通过npm run执行脚本
    "start": "webpack-dev-server --mode development --cfg dev",//启动web服务器，cfg是自定义参数，赋值为dev。
    "build": "webpack --mode production"
  },"keywords": [
    "react","typescript","webpack"
  ],"author": "chencong","license": "ISC","dependencies": {
    "clean-webpack-plugin": "^1.0.1","html-webpack-plugin": "^3.2.0","ts-loader": "^5.3.3","typescript": "^3.3.3","webpack": "^4.29.3","webpack-cli": "^3.2.3","webpack-dev-server": "^3.1.14","yargs": "^13.1.0"
  },"devDependencies": {
    "react": "^16.8.2","react-dom": "^16.8.2"
  }
}

npm install --save-dev react react-dom

npm install --save typescript ts-loader

{
  "version": "1.0.0","compilerOptions": {
    "baseUrl": "./",//解析非相对模块的基准目录
    "paths": {  //路径映射，如在文件中使用‘~/’相当于‘src/’
      "~/*": ["src/*"]
    },"module": "esnext",//指定生成哪个模块系统的代码
    "target": "es5",//生成es5的js文件
    "jsx": "react",//在tsx文件里支持jsx
    "sourceMap": true,"moduleResolution": "node",//决定如何处理模块
    "allowJs": true,//允许编译js文件
    "strictNullChecks": false,//在严格的 null检查模式下， null和 undefined值不包含在任何类型里，只允许用它们自己和 any来赋值（有个例外， undefined可以赋值到 void）
    "lib": ["es2015","dom","es2015.promise"]  //编译过程中需要引入的库文件的列表
  },"include": ["src/**/*"],//编译包含在  src及其子目录下的所有匹配的文件
  "exclude": ["dist","node_modules"]  //编译时排除 dist、node_modules文件夹
}

npm install --save webpack webpack-cli html-webpack-plugin clean-webpack-plugin yargs

const path = require("path");
const argv = require("yargs").argv;  //获取命令行中参数的对象
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

const isDev = argv.cfg && argv.cfg === "dev";  //是否为开发模式，如果输入yarn start执行"webpack-dev-server --mode development --cfg dev"，argv.cfg获取参数的值为dev。
let compileConfig = "index";
if (isDev) {
  compileConfig = "index." + argv.cfg;
}

const buildConfig = require(`./config/${compileConfig}`); // 开发模式下，引入index.dev.js中的配置信息。生产模式下，引入index.js中的配置信息
const modules = Object.keys(buildConfig);
const entry = Object.create(null);
const htmlPlugins = [];
if (modules.length > 0) {
  for (let srcModule of modules) {
    entry[srcModule] = path.resolve(__dirname,`./src/${srcModule}`);  // 多页面应用webpack配置文件entry属性的值
    htmlPlugins.push(  // html-webpack-plugin插件生成html的配置 new HtmlWebpackPlugin({
        title: buildConfig[srcModule]["title"],filename: `${srcModule}/index.html`,template: path.resolve(__dirname,"./tpl/index.html"),chunks: [srcModule]
      })
    );
  }
}

const config = {
  entry,output: {
    publicPath: "/dist/",filename: "[name].[hash].js",path: path.resolve(__dirname,"dist")
  },
　 module: {
　　 rules: [
　　　 { // 除了node_modules文件夹中的文件，所有的tsx文件都用ts-loader处理
　　　　　test: /.tsx?$/,
　　　　　use: "ts-loader",
　　　　　exclude: /node_modules/
　　　 }
　　 ]　
  }
  plugins: [new CleanPlugin([‘dist‘]),...htmlPlugins],resolve: {
    extensions: [".tsx",".ts",".js"]
  },devtool: isDev ? "source-map" : false    // 值为source-map时，方便在浏览器中使用react开发工具调试
};

if (isDev) {  // 开发模式时，启动web服务
  config.devServer = {
    port: 9000,open: true,hot: true,// 启用webpack中的热替换特性
    openPage: `dist/${modules[0]}`  // 打开index.dev.js配置中的第一个页面
  };
  config.plugins.push(new webpack.HotModuleReplacementPlugin());  // 热替换需要的插件
}

module.exports = config;