Webpack 提取文本插件输出 .js 和 .css 文件用于样式输入答案

【问题标题】：Webpack extract text plugin outputting .js and .css file for styles entryWebpack 提取文本插件输出 .js 和 .css 文件用于样式输入
【发布时间】：2016-09-25 14:46:45
【问题描述】：

对于产品构建，我希望我的 webpack 配置有两个入口点，一个用于 JS，一个用于 SCSS，我希望将它们输出到两个单独的文件（一个 JS，一个 CSS）。

但是 extract-text-webpack-plugin 正在创建两个 JS 文件和一个 CSS 文件；即 SCSS 的入口点是生成所需的 CSS 文件和我不想要的 JS 文件。这个未使用的 JS 文件只包含 webpack 样板和 // removed by extract-text-webpack-plugin。所以它的工作很好，但仍然创建了这个不必要的文件。我的 webpack 配置是（显示相关部分）：

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

module.exports = {
    entry: {
        app: './client/src/app.js',
        style: './client/src/app.scss'
    },
    output: {
        path: __dirname + '/server/assets/',
        publicPath: '/',
        filename: 'bundle.[chunkhash].js',
    },
    module: {
        loaders: [{
        test: /\.js/,
        exclude: /node_modules/,
        include: /src/,
        loader: 'babel-loader'
        },{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css', 'sass'),
        },{
        test: /.*\.(woff|woff2|eot|ttf)$/i,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },{
        test: /.*\.(png|svg|jpg)$/i,
        loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
        ]
        }]
    },
    plugins: [
        new ExtractTextPlugin('bundle.[chunkhash].css', {
        allChunks: true
        })  
    ]
};

所以基本上输出是创建两个 .js 文件，每个条目一个，然后提取插件创建实际所需的 .css 文件。如何防止输出创建不必要的文件？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

另一种选择是将app 和style 块合并为一个：

entry: {
    app: [
        './client/src/app.js',
        './client/src/app.scss'
    ]
}

这样 webpack 将只生成一个块 - app。同时ExtractTextPlugin 会从中删除任何.scss 模块。内容将被放入bundle.[chunkhash].css。

【讨论】：

比起在 JS 中使用 require("app.scss")，我更喜欢你的方法。在webpack.config 文件中显示.scss 会更简洁。
一样，我更喜欢这种方法
而且，我认为这是在某些情况下唯一正确的方法，就像定义一些 env 特殊的 css，例如，一个 css 仅来自产品而不是用于开发。非常感谢，这已经够清楚了。

【解决方案2】：

从你的 webpack 配置中移除 style 入口点：

module.exports = {
  entry: {
    app: './client/src/app.js'
  },
  // ...
}

然后从你的app.js文件中require它：

// app.js
require('./app.scss');
// ...

【讨论】：

【解决方案3】：

我整理了一个webpack plugin 以根据它们的最终输出大小删除额外的文件 - 鉴于这些文件往往非常小，这似乎只是检查它们有多大并删除那些小的、无用的文件的情况.

使用npm 或yarn 安装

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

在您的webpack.config.js 文件中：

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: ['.js']
    })
  ]
}

您可以在Webpack Extraneous File Cleanup Plugin Github Page 上查看完整的选项列表

【讨论】：