Question

我是webpack＆amp;的新手反应。我正在使用webpack 2.0。我把我的webpack配置为

const path = require("path");
module.exports = {
    context: path.resolve("src"),
    entry: "index.tsx",
    output: {
        filename: "bundle.js",
        path: path.resolve("build/js/"),
        publicPath: "/public/assets/js/",
    },
    devtool: "source-map",
    devServer: {
        contentBase: path.resolve("public")
    },
    resolve: {
        modules: [path.resolve("node_modules"), path.resolve("src")],
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            { test: /\.tsx?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },
            { test: /\.css$/, exclude: /node_modules/, use: ["style-loader", "css-loader"] },
            { test: /\.(png|jpg|gif)$/, loader: "url-loader", options:{ limit: 10000 } },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

我需要能够在我的索引页面中包含node_modules来呈现我定义的一些内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
</head>
<body>
<div id="example"></div>

<!-- Dependencies -->
<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>

<!-- Main -->
<script src="/public/assets/js/bundle.js"></script>
</body>
</html>

请帮我配置我的webpack.config，以便在我需要将它们暴露给公共页面时抛出我的node_modules。

我的文件夹结构为

project
|-node_modules
|-src
 |-components
   |-Hello.tsx
 |-index.tsx
|-public
  |-index.html
|-webpack.config.js
|-package.json

配置webpack以在需要时将node_modules包含为公共源

0 个答案: