Skip to main content

生成 html

目前为止，我们实现了一个简单的 React 工程，可以将 tsx 代码文件通过 webpack 最终打包成一个 js 文件，但还没能将它们打包成一个 html 文件。

目标

引入 HtmlWebpackPlugin，将 tsx 代码文件打包到一个 html 文件。

安装 HtmlWebpackPlugin​

根目录打开 Terminal，输入：

npm i html-webpack-plugin -D

html-webpack-plugin，作用是生成一个 html 文件，并将打包后的 js 文件引入进来。可以指定一个 html 文件给它，也可以不指定，它会自动生成一个。 在生成的 html 中，会将 webpack 打包后的 js 文件引入进来。

修改 webpack.config.js​

引入 HtmlWebpackPlugin 包，并在 plugins 中添加 HtmlWebpackPlugin 实例：

scripts/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const resolve = (dir) => path.join(__dirname, '..', dir);

/**
 * @return {import('webpack').Configuration}
 */
const createConfig = () => {
    return {
        mode: 'development',
        entry: resolve('tsc_outputs/src/screen/membership/pages/index/index.js'),
        output: {
            path: resolve('dist'),
            filename: 'index.js',
            clean: true,
        },
        plugins: [new HtmlWebpackPlugin()],
    };
};

module.exports = createConfig;

执行下试试​

npm run dev

就可以看到在 dist 目录下生成了以下两个文件：

dist
├── index.html
└── index.js

本地起一个 web 服务就可以打开浏览器访问了：

npx http-server dist
配置项文档

https://github.com/jantimon/html-webpack-plugin#configuration