"如何防止 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')
      ]
};

Above is my webpack.config.js file. It creates signup_style.min.js and signup_style.css files. I want only signup_style.css file to create and not signup_style.min.js .

How can we do that?

Answer 1

You can use https://www.npmjs.com/package/webpack-fix-style-only-entries

This is a small plugin developed to solve the problem of having a style only entry (css/sass/less) generating an extra js file.

Answer 2

By default webpack will generate that .min.js file. As in your configuration output all the entry files must generate its js files.

Note: extract-text-webpack-plugin will extract all css/sass located in your js entry files.

It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css).

All you need to do is to remove that file if you don't want it. I am using https://github.com/gregnb/filemanager-webpack-plugin/ . Where you can define what files you will remove before or after webpack bundling.

Answer 3

For Webpack 5 use the webpack-remove-empty-scripts<\/a> .