如何將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。