如何將CSS文件從源文件夾捆綁和復制到dist文件夾？

Question

這是我的文件夾結構：

我想縮小並捆綁src/css文件夾中的src/css文件，並將其作為dist的單個CSS文件輸出。 所有我見過的例子至今建議require -ing一個JS文件中的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 ，將確定minimize: true/false 。 請享用！

Answer 2

它將分三步進行；

首先，您將需要兩個加載器和插件； 分別命名為css-loader和style-loader和extract-text-webpack-plugin 。

然后您的配置可能如下所示：

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中加載字體文件和圖像，則可能還需要file-loader插件，該插件將復制目錄中的所有資產。

文件加載器配置如下所示：

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

UgligyJsPlugin也將縮小CSS。