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

Question

这是我的文件夹结构:

我想缩小并捆绑我的 src/css 文件夹中的 CSS 文件，并将其输出为 dist 中的单个 CSS 文件。到目前为止，我看到的所有示例都建议在 JS 文件中使用 require-ing CSS 文件。我不要那个。有没有办法在 webpack.config.js 中配置以缩小和复制这些文件？

Answer 1

成功了。

安装开发依赖

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 将生成。基于 minimize: true/false，将决定缩小。享受吧!