Webpack提取文本插件输出样式条目的.js和.css文件

时间:2016-05-27 09:59:14

标签: javascript webpack

对于prod构建,我希望我的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文件。如何防止输出创建不必要的文件?

3 个答案:

答案 0 :(得分:8)

另一个选项是将appstyle块合并为一个:

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

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

答案 1 :(得分:4)

从webpack配置中删除style入口点:

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

然后require来自app.js文件:

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

答案 2 :(得分:0)

我将webpack plugin放在一起根据最终输出大小删除多余文件 - 假设这些文件往往非常小,似乎只是检查它们有多大并删除小文件,无用的。

使用npmyarn

进行安装
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

上查看完整的选项列表