首页 > webpack和react-hot-loader报错

webpack和react-hot-loader报错

我的webpack配置:webpack.config.js:

const webpack = require('webpack');
module.exports = {
        entry:['webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server','./src/js/app.js'],
        output:{
            path:'./dist/js',
            filename:'test.bundle.js',
            publicPath:'dist/'
        },
        module:{
            loaders:[
                {
                    test:/\.jsx?$/,
                    exclude:/node_modules/,
                    loaders:["react-hot","babel"]
                },
                {
                    test:/\.css$/,
                    loader:'style!css'
                },
                {
                    test: /\.scss$/,
                    loader: 'style!css!sass'
                },
                {
                    test:/\.(jpg|png)$/,
                    loader:'url'
                }
            ]
        },
        devServer: {
            stats:{clors:true},
            hot: true,
            contentBase: "dist/",
        },
        resolve: {
            root: [process.cwd() + '/src', process.cwd() + '/node_modules'],
            alias: {},
            extensions: ['', '.js', '.css', '.scss', '.ejs', '.png', '.jpg']
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin(),
            new webpack.BannerPlugin('This file is created by LuoXia')
        ]
};

然后我的server.js:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) console.log(err);
  console.log('Listening at localhost:3000');
});

我node server.js,报错:


E:\luoxia\front-end\front_end_\React\node_modules\webpack-dev-middleware\middleware.js:106
                        if(err) throw err;
                                ^
Error: invalid argument
    at pathToArray (E:\luoxia\front-end\front_end_\React\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (E:\luoxia\front-end\front_end_\React\node_modules\memory-fs\lib\MemoryFileSystem.js:139:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (E:\luoxia\front-end\front_end_\React\node_modules\memory-fs\lib\MemoryFileSystem.js:279:34)
    at Compiler.<anonymous> (E:\luoxia\front-end\front_end_\React\node_modules\webpack\lib\Compiler.js:229:25)
    at Compiler.applyPluginsAsync (E:\luoxia\front-end\front_end_\React\node_modules\tapable\lib\Tapable.js:60:69)
    at Compiler.emitAssets (E:\luoxia\front-end\front_end_\React\node_modules\webpack\lib\Compiler.js:226:7)
    at Watching.<anonymous> (E:\luoxia\front-end\front_end_\React\node_modules\webpack\lib\Compiler.js:54:18)
    at E:\luoxia\front-end\front_end_\React\node_modules\webpack\lib\Compiler.js:403:12
    at Compiler.next (E:\luoxia\front-end\front_end_\React\node_modules\tapable\lib\Tapable.js:67:11)
    at Compiler.<anonymous> (E:\luoxia\front-end\front_end_\React\node_modules\webpack\lib\CachePlugin.js:40:4)

请问怎么回事呢?谢谢


有几个问题:

1、 output 要使用绝对路径,文档里明确说明了

The output directory as absolute path (required).

2、 参数拼写错误:colors,当然这个不会造成报错

devServer: {
   stats:{clors:true},
},

3、 你使用 node.js api,那么 webpack-dev-server 的配置不应该放到 webpack 的 devServer,应该放到这里:

文档:

the webpack-dev-server module has no access to the webpack configuration

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) console.log(err);
  console.log('Listening at localhost:3000');
});

参考下: https://.com/q/10...

【热门文章】
【热门文章】