Question

我的webpack配置是这样的：

 var path = require('path');
 var webpack = require('webpack');
 var ROOT_PATH = path.resolve(__dirname);
 var APP_PATH = path.resolve(ROOT_PATH, 'WebApp');
 var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
 var nodeModulePath=path.resolve(ROOT_PATH,'node_modules');
 var HtmlwebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   devtool:false,
    entry: {
       main: './WebApp/index.js',
       vendor:["jquery",'immutable','react','antd']

 },
output: {
    path: 'build',
    publicPath:'/build',
    filename: '[name].[hash].js',
    chunkFilename: "[id].chunk.js"

},
resolve:{
    //当requrie的模块找不到时，添加这些后缀
    extentions:["",".js",".jsx",".es6",'.css','.png','.jpg'],
    //让webpack不需要搜索可以直接处理的文件
    alias:{
        'react-dom':path.join(nodeModulePath,'/react-dom/dist/react-dom.min'),
        'react':path.join(nodeModulePath,'/react/dist/react.min'),
        'redux':path.join(nodeModulePath,'/redux/dist/redux.min'),
        'react-redux':path.join(nodeModulePath,'/react-redux/dist/react-redux.min'),
        'jquery':path.join(nodeModulePath,'/jquery/dist/jquery.min'),
        'immutable':path.join(nodeModulePath,'/immutable/dist/immutable.min')
    }
},
module: {
    //没有依赖的文件可以直接处理
    noParse:[path.join(nodeModulePath,'/react/dist/react.min'),path.join(nodeModulePath,'/immutable/dist/immutable.min'),path.join(nodeModulePath,'/redux/dist/redux.min')],
    loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel',
            //include: ROOT_PATH,
            exclude: /node_modules/,
            query: {
                //添加两个presents 使用这两种presets处理js或者jsx文件
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.css$/,
            loaders: ['style', 'css', 'sass'],
            include: ROOT_PATH
        },
        {
            test: /\.(png|jpg)$/,
            loader: 'url?limit=40000'
        }
    ]
},
plugins: [
    new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }),
   // 插件有问题
   // new webpack.optimize.UglifyJsPlugin({minimize: true,compress:{warnings:false}}),
    new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js'),
    new HtmlwebpackPlugin({
    template: path.resolve(APP_PATH, 'index.html'),
    filename: 'app.html',
    // //chunks这个参数告诉插件要引用entry里面的哪几个入口
    chunks: ['main','vendor'],
    // //要把script插入到标签里
    inject: 'body'
    // title: 'Hello World app'
})

]
};

这是我的节点server.js：

var express = require('express')
var app = express()
var fs = require('fs')
var path = require('path')
console.log(__dirname);
app.use(express.static(__dirname));
app.get('/',  function (req, res, next) {

    var fileName =__dirname+ '/build/app.html';
    res.sendFile(fileName, function (err) {
        if (err) {
            console.log(err);
            res.status(err.status).end();
        }
        else {
            console.log('Sent:', fileName);
        }
    })
});

app.listen(3080, function () {
    console.log('Server listening on http://localhost:3080, Ctrl+C to stop')
})

但是当我运行它时，我总是得到错误Cannot GET /build/build0.chunk.js

我在开发环境中使用webpack一切正常，但在生产环境中我总是收到此错误，我只是得到0.chunk.js和1.chunk.js等等，但为什么会出现此错误：{{ 1}}，我的Cannot GET /build/build0.chunk.js是否有问题？

为什么我总是在我的webpack配置中出现模块加载错误？

0 个答案: