Webpack开发服务器无法找到node_modules目录。

Question

我对webpack还不熟悉，在尝试设置webpack时遇到了一些问题。

我有以下目录结构：

• Node Modules
• Public (index.html, index.jsx)
• Components
• webpack.config.js

在index.html中，我尝试包含了以下内容：

<script src="../node_modules/react/dist/react-with-addons.js"></script>

当我尝试运行webpack dev服务器时，控制台会显示：

http://localhost:8080/node_modules/react/dist/react-with-addons.js not found

以下是我的webpack.config.js文件：

以下是我的webpack.config.js文件：

module.exports = {
    //This is the entry point for the webpack
    entry: {
    app: ['./public/index.jsx']
    },
    output: {
    // This is the name of the bundle which is created  when webpack runs
    path: './public',
    filename: 'bundle.js' 
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

- Vamshi Kolanu

Answer 1

我知道这是一个比较老的问题，但我今天也遇到了同样的困境。

我使用的解决方法是，在contentBase中传递一个带有node_modules的数组。

devServer: {
    contentBase: [
      path.resolve(__dirname, "public"),
      path.resolve(__dirname, "node_modules")
    ],
    publicPath:  "/"
}

然后在你的HTML中：

<script src="./react/dist/react.js"></script>

这种方式无需将 React 包含在您的捆绑包中，因此它可以由浏览器缓存。

- Michelangelo Partipilo