Webpack打包分割导致生成空的bundle.js文件。

Question

我试图通过创建两个入口点并使用ExtractTextPlugin来保持我的CSS（从Sass编译而来）和JS分开，但是由于某种原因，我最终得到了一个空的bundle.js文件（除了清单JS代码）和一个正确的style.css文件。我确定这与我如何配置我的webpack.config.js有关，但我就是想不出我在这里做错了什么......

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

/**
 * Default webpack configuration for development
 */
const config = {
  devtool: 'source-map',
  entry: {
    app: path.resolve(__dirname, 'resources/js/app.js'),
    style: path.resolve(__dirname, 'resources/sass/style.scss')
  },
  output: {
    path: path.resolve(__dirname, 'public/scripts'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?minimize!resolve-url!sass?sourceMap'),
        include: path.resolve(__dirname, 'resources/sass')
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('../css/[name].css'),
  ],
  devServer: {
    contentBase: './public',
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

/**
 * If bundling for production, optimize output
 */
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({comments: false}),
    new webpack.DefinePlugin({
      'process.env': {NODE_ENV: JSON.stringify('production')}
    })
  )
}

module.exports = config

运行webpack的输出结果如下：

webpack控制台输出

当我注释掉所有与sass/css相关的内容后，生成的bundle.js看起来很好。我还尝试了只使用一个简单的css源文件，但是结果仍然为空。也许我需要以某种方式使用CommonsChunkPlugin？非常感谢您的帮助。

- Mikey Dee

---

首先 - 摆脱这个 style: path.resolve(__dirname, 'resources/sass/style.scss')，其次 - new ExtractTextPlugin('../css/[name].css', {allChunks: true})，第三 - 在您的页面上包含一个 link 标签，您的样式应该在这里。 - devellopah

很遗憾，它不起作用。是的，我的bundle.js现在创建得很好，但是现在没有生成style.css。 - Mikey Dee

Answer 1

我通过更改代码成功生成了 bundle.js 和 style.css

output: {
  path: path.resolve(__dirname, 'public/scripts'),
  filename: 'bundle.js'
}

到

output: {
  path: path.resolve(__dirname, 'public/scripts'),
  filename: '[name].js'
}

我现在也有一个小的style.js和style.js.map文件（包含webpack清单，我想）。

- Mikey Dee

---

剩余的 style.js 文件是由于 https://github.com/webpack/webpack/issues/1967 的问题（我认为）。 - richvdh