时间戳

首页 > 解决方案 > 应该如何编写反应页面中的脚本标记以将其正确包含在 webpack 中？

reactjs - 应该如何编写反应页面中的脚本标记以将其正确包含在 webpack 中？

问题描述

我正在尝试在我的 HTML 页面中包含 react。起初我是这样尝试的：

<script src="js/custom/custom.js"></script>

但是该语法给了我以下错误：

未捕获的语法错误：无法在模块外使用 import 语句

所以我添加了模块属性：

<script type="module" src="js/custom/custom.js"></script>

但是这样，webpack 无法正确解析模块路径，给我这个错误：

未捕获的类型错误：无法解析模块说明符“react”。相对引用必须以“/”、“./”或“../”开头。

我已经使用自定义入口路径设置了 webpack，如下所示：

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: './js/custom/custom.js',
    output: {
        path:  path.join(__dirname, '/build'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, '/'),
        port: 9000
    },

标签： reactjswebpacknode-moduleswebpack-dev-server

解决方案

html-webpack-plugin是你需要的东西

看看这个_

该插件将为您生成一个 HTML5 文件，该文件使用脚本标签在正文中包含所有 webpack 包。只需将插件添加到您的 webpack 配置中，如下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

...
plugins: [new HtmlWebpackPlugin()]
..

检查如何添加自定义模板

推荐阅读