webpack 生成不必要的输出文件

Question

我正在使用多个入口点（一个用于生成捆绑的 js 文件 (main.js)，另一个用于生成 css 文件 (style.css)。我的 webpack.config.js 文件生成这两个文件，但也生成一个 style.js 文件。如何让它不生成 style.js 文件？

webpack.config.js:

'use strict';

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',

  entry: {
    main: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, './app/main.js')],

    style: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, './app/main.css')]},

  // any way to indicate that only the 1st entry point should be output to a file?
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        "presets": ["react", ["es2015", { "modules": false }], "stage-0", "react-hmre"]
      }
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
    }]
  }
};

ExtractTextPlugin 使用样式入口点生成 css 文件，我不想在捆绑输出中使用该入口点。有没有办法只将主要（第一个）入口点用于输出？或者我应该改变我的方法来完全生成 style.css 文件吗？

Answer 1

快速修复：删除第二个 .css 条目。您只需要 .js 项。

entry: {
    main: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, './app/main.js')
    ],

    // Remove this entry!
    // style: [
    //   'webpack-hot-middleware/client?reload=true',
    //   path.join(__dirname, './app/main.css')
    // ]
}

您需要导入或要求所有使用过的.css文件（您的main.css）至少你的 .js 文件之一是这样的（我使用打字稿）：

import "font-awesome/css/font-awesome.css";

为什么？

The ExtractTextPlugin uses the style entry point to generate the css file ...

不，不是！

Webpack 的工作方式是：

它通过查看 import 和您所有 javascript 文件中的 require 个部分，从提供的条目。
依赖图中的每个文件Webpack应用加载器基于所有加载程序对象的 test 属性。这是哪里 ExtractTextPlugin loader 进来了。它会处理图表中的所有 .css 个文件。
最后，它应用所有指定的插件。再次， ExtractTextPlugin plugin 会进来完成工作 ExtractTextPlugin 加载程序 已启动。

webpack 生成不必要的输出文件

webpack generating unnecessary output file

webpack

extracttextwebpackplugin