如何将CSS文件从源文件夹打包并复制到dist文件夹？

Question

这里是我的文件夹结构：

我要来缩小和捆绑我src/css文件夹，并将其输出作为内部dist一个CSS文件中的CSS文件。到目前为止，我所见过的所有例子都推荐require -ing在JS文件中的CSS文件。我不要那个。有没有一种方法可以在webpack.config.js中配置以简化和复制这些文件？

Answer 1

得到它的工作。

安装DEV-依赖条件

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，缩小将决定。请享用！

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。