模塊時無法導出webpack.config：false

Question

在我的index.js裏面我使用的是webpack-dev-middleware/webpack-hot-middleware，我需要使用webpack.config並將其用於編譯器。

index.js

const webpack = require('webpack') 
    const webpackConfig = require('../../webpack.config.js') 
    const compiler = webpack(webpackConfig) 
    const webpackDevMiddleware = require('webpack-dev-middleware') 

    app.use(webpackDevMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    hot: true, 
    noInfo: true, 
    stats: { 
     colors: true 
    } 
    })) 

    app.use(require('webpack-hot-middleware')(compiler)) 

我嘗試使用Common.js通過需要和module.exports導出我的webpack.config但我得到錯誤

TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 

webpack.config

'use strict' 

const path = require('path') 
const webpack = require('webpack') 
const publicPath = path.resolve(__dirname, './src/client') 
const buildPath = path.resolve(__dirname, './src') 


process.noDeprecation = true 

module.exports = { 
    devtool: 'source-maps', 
    performance: { 
    hints: false 
    }, 
    context: publicPath, 
    entry: { 
    bundle: [ 
     'react-hot-loader/patch', 
     'webpack-hot-middleware/client?reload=false&noInfo=true', 
     'script-loader!jquery/dist/jquery.min.js', 
     'script-loader!tether/dist/js/tether.min.js', 
     'script-loader!bootstrap/dist/js/bootstrap.min.js', 
     './app.js' 
    ] 
    }, 
    output: { 
    path: path.join(buildPath, 'dist'), 
    filename: '[name].js', 
    publicPath: '/' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    alias: { 
     CountdownForm: path.resolve(__dirname, 'src/client/scenes/countdown/components/CountdownForm.jsx'), 
     Countdown: path.resolve(__dirname, 'src/client/scenes/countdown/index.jsx'), 
    .. 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules|dist|build/, 
     loader: 'babel-loader', 
     options: { 
      plugins: [ 
      [ 
       'babel-plugin-react-css-modules', 
       { 
       context: publicPath, 
       filetypes: { 
        '.scss': 'postcss-scss' 
       } 
       } 
      ] 
      ] 
     } 
     }, 
     { 
     test: /\.local\.(css|scss)$/, 
     use: [ 
      'style-loader', 
      'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 
      'postcss-loader', 
      'sass-loader', 
      { 
      loader: 'sass-resources-loader', 
      options: { 
       resources: path.resolve(__dirname, './src/client/styles/global/sass-resources.scss') 
      } 
      } 
     ] 
     }, 
     { 
     test: /^((?!\.local).)+\.(css|scss)$/, 
     use: [ 
      'style-loader', 
      'css-loader', 
      'postcss-loader', 
      'sass-loader' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.NamedModulesPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     jquery: 'jquery' 
    }), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify('development') 
     } 
    }) 
    ] 
} 

如果我使用ES6使用進口語句在頂部，而不是需要和出口默認代替module.exports的（我用巴貝爾，這通常工作）我得到這個錯誤

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 
- configuration misses the property 'entry'. 

所有這一切都是因爲模塊：假在我的.babelrc如果我刪除該Common.js的方式工作，但我需要這個。我如何導出webpack.config使用模塊編譯器：假

{ 
    "presets": [ 
    "react", 
    ["es2015", { "modules": false }], 
    "stage-0" 
    ], 
    "plugins": [ 
    "react-hot-loader/babel", 
    "transform-runtime" 
    ] 
} 

Answer 1

transform-runtime增加import和結果與您module.exports混合import。

簡單的解決方法是用ES6更換module.exportsexport

module.exports = { ...webpackconfig } 

成爲

export default { ...webpackconfig } 

和更新您的index.js使用默認的出口

const webpackConfig = require('../../webpack.config.js').default 

---

你可以找到這些問題的

https://github.com/webpack/webpack/issues/4039 https://github.com/webpack/webpack/issues/3917