webpack-example questions

[woshiwenzhijie]

in the webpack-example ./src/www/index.html
there is code like this:
<script src='app.js'><script>

if I intall and start
Server is located at http://localhost:3000
then I visit http://localhost:3000/src/www/
there is a error:

Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/src/www/app.js
Request Method:GET
Status Code:404 Not Found

[jkruder]

The app is served out of the build directory so http://localhost:3000 is serving /your/project/root/build. This dir will contain the app.js and index.html files.

[woshiwenzhijie]

If I visit,it show me this:

[acao]

You don't have a build directory it seems - are you manually serving out of the directory?

Make sure to run npm install first from that directory, then run nmp start in order to build the application and run the webpack-dev-server

[woshiwenzhijie]

I am ensure has run npm install.

After run npm start,it show me something like this

Is there anything wrong?

[woshiwenzhijie]

webpack-dev-server.config.js

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var TransferWebpackPlugin = require('transfer-webpack-plugin');

var config = {
  //Entry points to the project
  entry: [
    'webpack/hot/dev-server',
    'webpack/hot/only-dev-server',
    path.join(__dirname, '/src/app/app.jsx')
  ],
  //Config options on how to interpret requires imports
  resolve: {
    extensions: ["", ".js", ".jsx"]
    //node_modules: ["web_modules", "node_modules"]  (Default Settings)
  },
  //Server Configuration options
  devServer:{
    contentBase: '',  //Relative directory for base of server
    devtool: 'eval',
    hot: true,        //Live-reload
    inline: true,
    port: 3000        //Port Number
  },
  devtool: 'eval',
  output: {
    path: buildPath,    //Path of output file
    filename: 'app.js'
  },
  plugins: [
    //Enables Hot Modules Replacement
    new webpack.HotModuleReplacementPlugin(),
    //Allows error warnings but does not stop compiling. Will remove when eslint is added
    new webpack.NoErrorsPlugin(),
    //Moves files
    new TransferWebpackPlugin([
      {from: 'www'}
    ], path.resolve(__dirname, "src"))
  ],
  module: {
    //Loaders to interpret non-vanilla javascript code as well as most other extensions including images and text.
    preLoaders: [
      {
        //Eslint loader
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        include: [path.resolve(__dirname, "src/app")],
        exclude: [nodeModulesPath]
      },
    ],
    loaders: [
      {
        //React-hot loader and
        test: /\.(js|jsx)$/,  //All .js and .jsx files
        loaders: ['react-hot','babel-loader?stage=0'], //react-hot is like browser sync and babel loads jsx and es6-7
        exclude: [nodeModulesPath]
      }
    ]
  },
  //eslint config options. Part of the eslint-loader package
  eslint: {
    configFile: '.eslintrc'
  },
};

module.exports = config;

[woshiwenzhijie]

If I set devServer.contentBase = path.join(__dirname, '/src/www'),it works.Everything seems OK.
But css are missing.Is it anything wrong about my webpack-dev-server.config.js
It make me confused.

[woshiwenzhijie]

@acao
@jkruder
@alltom
@unageanu
@cavneb

[woshiwenzhijie]

I really do not know what happen in my project.
I clone https://github.com/callemall/material-ui/tree/master/examples/webpack-example.
This is my project directory:

--material-ui-demo
  --src
     --app
     --css
     --www
  package.json
  webpack-dev-server.config.js

cd materail-ui-demo
npm install
npm start

Then visit http://localhost:3000/
But it does not work.

[mdocter]

The following worked for me:

First run npm install.

Than modify webpack-dev-server.config.js like this:

devServer:{
    contentBase: 'src/www',  //Relative directory for base of server
    devtool: 'eval',
    hot: true,        //Live-reload
    inline: true,
    port: 3000        //Port Number
  },

Note that contentBase should be set with a relative path to the directory containing the index.html file. It should not point to your build folder as was mentioned here.

Now run npm start and when webpack is done, visit:

http://localhost:3000/webpack-dev-server/

NB. The slash at the end is required!

[woshiwenzhijie]

thanks~