Example for use with plain webpack

[lemol]

Please, can you provide an example of using it without the atool-build. How can I use it with plain webpack configuration?

Currently I have the following webpack.config.js file ported from my redux project:

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

var entry = {};
entry['app'] = ['./app'];

if(process.env.NODE_ENV === 'development') {
  var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000';
  entry['app'].push(hotMiddlewareScript);
}

module.exports = {
  entry: entry,
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: '/',
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    },
    {
      test: /\.(png|jpg|svg|gif)$/,
      loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
    },
    {
      test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
      loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
    },
    { test: /\.html$/, loader: "url-loader!file-loader" },
    { test: /\.css$/, loader: "style-loader!css-loader" },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    hot: true,
    historyApiFallback: true,
    contentBase: './'
  },
  debug: true,
  devtool: '#source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
      }
    }),
    new webpack.NoErrorsPlugin()
  ]
};

[sorrycc]

babel-plugin-dva-hmr is a babel plugin, you can configure it in .dvarc.

[lemol]

Hi @sorrycc, thank you for your answer. I set my .babelrc as:

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    [
      "dva-hmr", {
        "container": "#root",
        "quiet": false
      }
    ]
  ]
}

but I'm getting the following error related with the babel-plugin-dva-hmr library:

$ node server.js
Express server listening on port 3000 in development mode
webpack built 411a2c395d79265d828e in 602ms
Hash: 411a2c395d79265d828e
Version: webpack 1.13.3
Time: 602ms
            Asset     Size  Chunks       Chunk Names
    app.bundle.js  21.7 kB       0       app
app.bundle.js.map  22.5 kB       0       app
chunk    {0} app.bundle.js, app.bundle.js.map (app) 28 bytes [rendered]
    [0] multi app 28 bytes {0} [built] [1 error]

ERROR in ./app/index.js
Module build failed: ReferenceError: C:/labs/lemol/ordenfa-pagamentos-front/app/index.js: opts is not defined
    at getRouterPath (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-plugin-dva-hmr\lib\index.js:108:6)
    at PluginPass.CallExpression (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-plugin-dva-hmr\lib\index.js:123:28)
    at newFn (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\visitors.js:276:21)
    at NodePath._call (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\context.js:108:19)
    at TraversalContext.visit (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\context.js:192:19)
    at Function.traverse.node (C:\labs\lemol\ordenfa-pagamentos-front\node_modules\babel-traverse\lib\index.js:114:17)
 @ multi app
webpack: bundle is now VALID.

I checked babel-plugin-dva-hmr\lib\index.js:108:6, and I see there is a variable opts that is not defined.

[sorrycc]

It's a bug (I will fix it tomorrow) when no router is found. Can you show me your app/index.js ? Then I can locate why router is not found.

[lemol]

Sure. My app/index.js :

import dva from 'dva';
import createLoading from 'dva-loading';
import { reducer as formReducer } from 'redux-form';

// 1. Initialize
const app = dva(createLoading());

// 2. Plugins
app.use({
  extraReducers: {
    form: formReducer
  }
});

// 3. Model
app.model(require('./models/listagemEnfermeiros').default);
app.model(require('./models/listagemParcelas').default);
app.model(require('./models/detalhesEnfermeiro').default);
app.model(require('./models/detalhesParcela').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

And it works correctly without the plugin.

[sorrycc]

Add babel-plugin-add-module-exports to your .babelrc, and remove .default in all require statement. Since this plugin don't support this pattern.

// Supported
app.router(require('./router'));

// Not Supported
app.router(require('./router').default);

[lemol]

Thank you @sorrycc, this solved my problem :)