Javascript 如何将CSS文件从源文件夹捆绑并复制到dist文件夹？

以下是我的文件夹结构：

---

我想缩小并捆绑我的

src/CSS

文件夹中的CSS文件，并将其作为

dist

中的单个CSS文件输出。到目前为止，我看到的所有示例都建议

要求在JS文件中插入CSS文件。我不想那样。是否有一种方法可以在
webpack.config.js
中配置这些文件以缩小并复制它们？
它将分三步进行

首先，您需要两个加载程序和插件；分别命名为
css加载程序
和
style加载程序
和
提取文本网页包插件

那么您的配置可能如下所示：

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    path: 'dist',
    filename: 'js/[name]-bundle.js'
  },
  devtool: "cheap-source-map",
  resolveLoader: {
    modules: [
      'node_modules',
      path.join(__dirname, '../node_modules'),
    ]
  },
  module: {
    loaders: [
      {
        test: /.css?$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("css/[name].css"),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        join_vars: true,
        if_return: true
      },
      output: {
        comments: false
      }
    }),
  ]
}

然后在您的输入文件中，像
require（'./style.css'）那样要求它们

记住，它将沿着路径作为源

如果您正在css中加载字体文件和图像，您可能还需要
文件加载器
插件，该插件将复制目录中的所有资源

文件加载程序配置如下所示：

{
    test: /.png?$/,
    loader: 'file-loader?name=img/[name].[ext]',
    exclude: /node_modules/
}

UgligyJsPlugin
也将缩小CSS。
让它工作起来

安装开发依赖项

npm i extract-text-webpack-plugin --save-dev
npm i css-loader --save-dev

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('bundle.min.css')

module.exports = {
  entry: {
    'bundle.min.css': [
      __dirname + '/src/styles/abc.css',
      __dirname + '/src/styles/xyz.css',
      __dirname + '/src/styles/mno.css'
    ]
  },
  devtool: '',
  output: {
    path: __dirname + '/dist/styles/',
    filename: '[name]'

  },
  module: {
    rules: [{
        test: /\.css$/i,
        use: extractCSS.extract({
          use: {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        })
    }]
  },
  resolve: {
    alias: {},
    modules: [],
    extensions: ['.css']
  },
  plugins: [
    extractCSS
  ]
};

将生成
bundle.min.css
。根据
最小化：真/假
，将决定缩小。享受吧
 有没有一种方法可以做到这一点，而不需要从JS文件中调用CSS？这感觉很奇怪。CSS不会添加到JS文件中，这只是一个要求，这意味着JS应用程序依赖于CSS文件。此配置是我的一个应用程序的直接形式。是否需要在条目中指定所有css文件？是的，因为一个css文件不会包含另一个。因此，必须手动编写。对于JS文件，需要一个入口点，所有其他导入的JS文件将自动绑定。可视化导入语句的图形，您就会明白。extract-text-webpack-plugin现在已不推荐使用