Jak pakować i kopiować pliki CSS z folderu źródłowego do folderu dist?

Question

Oto moja struktura folderów:

Chcę minify i zepnij pliki CSS w moim src/css folderu i wyjście je jako jeden plik CSS wewnątrz dist. Wszystkie przykłady, które do tej pory widziałem, polecają require -ing pliku CSS w pliku JS. Nie chcę tego. Czy istnieje sposób konfiguracji w webpack.config.js, aby tylko minimalizować i kopiować te pliki?

Answer 1

Gotowy do pracy.

Install 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 generowana. Na podstawie minimize: true/false, decyzja zostanie podjęta. Cieszyć się!

Answer 2

To przejdzie w trzech etapach;

Najpierw będziesz potrzebować dwóch ładowarek i wtyczki; nazwane odpowiednio css-loader i style-loader i i extract-text-webpack-plugin.

Wtedy twój config może wyglądać jak następuje:

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 
     } 
    }), 
    ] 
} 

a następnie w pliku wejściowego, wymaga od nich jak require('./style.css');

Pamiętaj, będzie śledzić ścieżki jako źródła.

Jeśli ładujesz pliki czcionek i obrazy w Tobie, możesz potrzebować również wtyczki file-loader, która skopiuje wszystkie zasoby w katalogu.

Plik config-ładowarka będzie wyglądać następująco:

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

UgligyJsPlugin również minify CSS.