Clever Geek Handbook

Webpack dev server could not find node_modules

I am new to webpack, I have to run into little problems when trying to set up webpack.

I have the following directory structure:

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

In index.html, I tried to include

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

and when i try to run webpack dev the server console shows me

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

Below is mypppack.config.js file:

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']
    }
}
+3


source to share


1 answer


I know this is a pretty old question, but I was struggling with this today.

The solution I am using is passing an array to contentBase

c node_modules

.

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


Then in your html:

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

This way you don't need to include React in your package and it can be cached by the browser.

+1


source






More articles:


All Articles