Webpack bundle拆分会产生空的bundle.js

Webpack bundle splitting produces empty bundle.js

本文关键字：bundle js 拆分 Webpack      更新时间：2023-09-26

我试图通过创建两个入口点和使用ExtractTextPlugin来保持我的css(从sass编译)和我的js分开，但由于某种原因，我最终得到了一个空的bundle.js(除了manifest 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 ?

所以我可以通过改变

来生成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 manifest我认为)。

相关文章：