2017-07-30 80 views
0

我知道这是webpack的常见问题;如果它不会提供任何有关错误原因或位置的信息,那么调试某些内容确实很困难。webpack - output.filename错误

,我发现了错误:

Error: 'output.filename' is required, either in config file or as --output-filename 

我知道它有什么地方有语法错误的事,但我太新的WebPack弄明白。

这是我的配置文件。它在根文件夹(即我最初运行的文件夹:npm init)中称为“webpack.config.js”。

const webpack = require('webpack'); 
const path = require("path"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 
const RewriteImportPlugin = require("less-plugin-rewrite-import"); 

const root_dir = path.resolve(__dirname) 
const src_dir = path.resolve(__dirname, "webpack_src") 
const build_dir = path.resolve(__dirname, "webpack_bin") 
const node_mod_dir = path.resolve(__dirname, 'node_modules'); 
const extractLESS = new ExtractTextPlugin('style.css'); 

const config = { 
    entry: { 
    index: path.resolve(src_dir, 'index.js') 
    }, 
    output: { 
    path: build_dir, 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    modules: [root_dir, 'node_modules'], 
    }, 
    module: { 
    rules: [ 
     { 
     loader: 'babel-loader', 
     test: /\.(js)$/ 
     }, 
     { 
     use: extractLESS.extract({ 
      fallback: 'style-loader', 
      use: [ 
      'css-loader', 
      { 
       loader: 'less-loader', 
       options: { 
       paths: [root_dir, node_mod_dir], 
       plugins: [ 
        new RewriteImportPlugin({ 
        paths: { 
         '../../theme.config': __dirname + '/semantic_ui/theme.config', 
        } 
        }) 
       ] 
       } 
      }] 
     }), 
     test: /\.less$/ 
     }, 
     { 
     use: ['file-loader'], 
     test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/ 
     }, 
    ] 
    }, 
    plugins: [ 
    extractLESS, 
    new webpack.optimize.ModuleConcatenationPlugin() 
    ] 
}; 

module.exports = { 
    config 
}; 

回答

1

要导出module.exports = { config },这意味着你有一个属性,即config出口对象,但预计的WebPack对象是整个配置。 Webpack需要output.filename,而您只能提供config.output.filename

出口应该是你的config

module.exports = config; 
+0

这就是它!我看到另一个线程有很多类似的语法建议,但没有一个提到了括号问题。 – twils0

+0

我(错误地)虽然任何方式都可以接受 - 括号或不带。如果任何人想要一个非Frankenstein(我已经从上面的代码片段中更正了一些其他的东西),那么我将使用这个博客来说明如何实现语义 - 用户反应和无语义的主题,链接到git的例子:[neekey](http://neekey.net/2016/12/09/integrate-react-webpack-with-semantic-ui-and-theming/) – twils0