Làm cách nào để ghép và sao chép các tệp CSS từ thư mục nguồn sang thư mục dist?

Question

Dưới đây là cấu trúc thư mục của tôi:

Tôi muốn rút gọn và bó các file CSS bên src/css thư mục và đầu ra nó như là một tập tin CSS đơn bên dist tôi. Tất cả các ví dụ tôi đã thấy cho đến nay đề nghị require -ing tệp CSS bên trong tệp JS. Tôi không muốn điều đó. Có cách nào để định cấu hình trong webpack.config.js để chỉ rút gọn và sao chép các tệp này không?

Answer 1

Có hoạt động.

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 sẽ được tạo ra. Dựa trên minimize: true/false, việc rút gọn sẽ được quyết định. Thưởng thức!

Answer 2

Nó sẽ đi theo ba bước;

trước tiên, bạn sẽ cần hai trình tải và plugin; có tên là css-loader và style-loader và extract-text-webpack-plugin tương ứng.

Sau đó, cấu hình của bạn có thể trông giống như sau:

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

Và sau đó trong tập tin nhập của bạn, yêu cầu họ như require('./style.css');

Hãy nhớ rằng, nó sẽ đi theo con đường như là nguồn của bạn.

Nếu bạn đang tải các tệp phông chữ và hình ảnh trong css, bạn có thể cần plugin file-loader cũng sẽ sao chép tất cả nội dung trong thư mục.

Các cấu hình tập tin-loader sẽ trông giống như:

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

Các UgligyJsPlugin cũng sẽ rút gọn CSS.