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";

---

Почему?

ExtractTextPlugin использует точку входа стиль для создания файла CSS ...

Нет, это не так!

Путь Webpack работы является то, что:

1. он генерирует граф зависимостей, глядя на участках во всех ваших javascript файлов, начиная с предоставленных записей import и require.

   

2. С каждым файлом в графе зависимостей Webpack применяется погрузчики базы на test в свойстве всех объектов погрузчика. Здесь находится ExtractTextPluginЗагрузчик. Он позаботится о все .css файлы на графике.

3. Наконец, он применяет все указанные плагины. Опять же, ExtractTextPluginплагин придет, чтобы закончить работу, ExtractTextPluginпогрузчик начал.