Question

我试图保持我的css（从sass编译）和我的js分开创建两个入口点并使用ExtractTextPlugin但由于某种原因我最终得到一个空的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 console output

当我注释掉所有与sass / css有关的东西时，生成的bundle.js看起来很好。还尝试了一个简单的css源文件，但这给出了相同的空结果。也许我需要以某种方式使用CommonsChunkPlugin？任何帮助将不胜感激。

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清单）。

Webpack bundle拆分产生空的bundle.js

1 个答案: