Question

我正在使用：

react用于页面呈现。

typescript 直接（没有babel）将tsx转换为浏览器的ES5

webpack分别生成代码

babel-polyfill打包在vendor.js中但未被打字稿代码

引用

我想将javascript库和我的常用代码打包到一个vendor.js中，并使用[name].js生成单独的 [name].html文件（带模板）引用vendor.js [name].js 1}}和[name].tsx用于每个[name]（其中仅包含一个使用React.Component<P,S>扩展HtmlWebpackPlugin}的类定义[name].tsx。

vendor.js可以导入模块。 [name].js 中包含的模块不能包含在[name].js 中，其他模块通常必须包含在webpack

中

我已阅读[name].js官方网站的文档格式，但仍然不知道如何操作。

我确实找到了一些实现多页网站的指南，但是所有库都包含在单独的[name].js文件中，这意味着javascript库被冗余地包含在每个externals中，并且肯定不会预期

我找到了一些关于webpack.config.js的指南，但它只能用于现有的js文件，而不能用于生成的包文件。

这是我当前的const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: { "index.js": ['babel-polyfill', './src/index.tsx'] }, output: { filename: '[name]' }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ], module: { rules: [{ test: /\.(ts|tsx)$/, loader: 'ts-loader', exclude: '/node_modules/' }, { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },] }, resolve: { extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx'] }, devtool: "source-map" }，仅支持单页：

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<title>example</title>
</head>
<body bgcolor="#7E7E7E">
    <table style="color:white;" width="100&#37">
        <tr><td align="right"></td></tr>
        <tr>
            <td align="center" height="500">
                <font face="tahoma" size="6">example</font><hr width="35&#37">
                <form method="post" action="/">             
                    <input type="hidden" name="ID" value="randomid">
                    <input type="hidden" name="STATE" value="1">                    
                    <p><font face="verdana" size="3">User: <p></font> <input name="DATA"></p>
                    <p><input type="submit" value="Submit"></p>                 
                </form>
            </td>
        </tr>
    </table>
</body>
</html>

有没有办法让它支持多个页面？

如何使用单独的js文件Webpack多页（tsx）网站？

0 个答案: