如何防止webpack为css创建js文件？

Question

const path = require('path');

var webpack = require('webpack'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");
var nodeExternals = require('webpack-node-externals');
const CssEntryPlugin = require("css-entry-webpack-plugin");

module.exports = {
    entry: {
        index: './js/index.js',
        product_details: './js/index.js',
        signup: ['./js/signup.js','./js/index.js'],
        signup_style: ['./css/signup.css']
   },
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: "[name].min.js"
    },
    externals: [nodeExternals()],
    module: {
        rules: [
          {
            test: /\.js/,
            use: 'babel-loader',
            exclude: /node_modules/,
          },
          { 
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                        }
                    }]
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin('../css/[name].css')
      ]
};

上面是我的 webpack.config.js 文件。它创建signup_style.min.js和signup_style.css文件。我只想创建signup_style.css文件而不是signup_style.min.js。

我们怎么做？

Answer 1

您可以使用https://www.npmjs.com/package/webpack-fix-style-only-entries

这是一个小插件，旨在解决仅样式条目（css/sass/less）生成额外js文件的问题。

Answer 2

默认情况下，webpack 将生成该 .min.js 文件。正如您的配置中的output所有入口文件must generate及其 js 文件一样。

注意：extract-text-webpack-plugin将提取位于 js 入口文件中的所有 css/sass。

它将条目块中所有必需的 *.css 模块移动到单独的 CSS 文件中。因此，您的样式不再内联到 JS 包中，而是内联到单独的 CSS 文件 (styles.css) 中。

如果您不需要该文件，只需删除该文件即可。我正在使用https://github.com/gregnb/filemanager-webpack-plugin/。您可以在其中定义在 webpack 捆绑之前或之后要删除的文件。