javascript - webpack 从 js 文件中捆绑多个 css 导入

Question

这是我的 app.js 文件中导入列表的一部分:

import "jsgrid"
import "./../node_modules/jsgrid/dist/jsgrid.css";
import "./../node_modules/jsgrid/dist/jsgrid-theme.css";
import "jstree";
import "./../node_modules/jstree/dist/themes/default/style.css";

这是我的webpack.config:

var path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var SplitChunksPlugin = require('webpack.optimization.splitChunks');
var LiveReloadPlugin = require('webpack-livereload-plugin');

const autoprefixer = require('autoprefixer');

module.exports = {
  entry:{
    app: [ './src/app.scss', 'jquery', './src/app.js']
  },
  devtool: 'inline-source-map',
  externals: /^(tables.)/i,
  module: {
    rules: 
    [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
      },
      {
        test: /\.(css)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle-css.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          ],
      },
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle-sass.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            },
          }],
      },
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      }],
  },
  /*optimization: {
    splitChunks: {
      chunks: "initial"
    }
  },*/
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
    new LiveReloadPlugin({}),
    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
    /*new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json')
      })*/
  ],
  resolve: {
    extensions: ['.js']
  },

  watch: true,
  watchOptions: {
    aggregateTimeout: 300,

    //ignored: /node_modules/
  },
  output: {
    publicPath: './dist',
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
};

现在的问题是 webpack 似乎只考虑了我的导入列表中的第一个 .css 文件，而忽略了其余部分。所以到目前为止，webpack 只会将 jsgrid.css 编译到我的 bundle-css.css 中。但是如果我评论这一行:import "./../node_modules/jsgrid/dist/jsgrid.css"; 那么 webpack 只会将 jsgrid.theme 编译到我的包中.css。我一直在寻找这个问题已经有一段时间了，但还没有找到任何东西。

Answer 1

你的配置完全错误，看看我所做的更改:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');   // <-------- run npm install --save-dev mini-css-extract-plugin
const LiveReloadPlugin = require('webpack-livereload-plugin');

const autoprefixer = require('autoprefixer');

module.exports = {
  entry:{
    app: './src/app.js'
  },
  devtool: 'inline-source-map',
  externals: /^(tables.)/i,
  module: {
    rules: 
    [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
      },
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader, // <---- added here
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            }
          }
         ],
      },
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader, // <--- added here
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
                plugins: () => [autoprefixer()],
            },
          },
          'sass-loader'
        ],
      },
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      }],
  },
  /*optimization: {
    splitChunks: {
      chunks: "initial"
    }
  },*/
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: 'style.css'
    }),
    new LiveReloadPlugin({}),
    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
    /*new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json')
      })*/
  ],
  resolve: {
    extensions: ['.js']
  },

  watch: true,
  watchOptions: {
    aggregateTimeout: 300,

    //ignored: /node_modules/
  },
  output: {
    publicPath: './dist',
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
};