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

Question

这是我的文件夹结构：

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

Answer 1

搞定了。

安装dev-dependecies

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将生成。根据{{​​1}}，将决定缩小。享受！

Answer 2

它将分三步进行;

首先你需要两个加载器和插件;分别命名为implode()和$allProductsNames = ""; foreach($products as $product){ $allProductsNames[] = $product['product_name']; } echo implode(', ', $allProductsNames ); 以及css-loader。

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

style-loader

然后在您的输入文件中，请求extract-text-webpack-plugin

请记住，它将遵循路径作为您的来源。

如果您要在css中加载字体文件和图像，您可能还需要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');

file-loader也会缩小CSS。