Webpack how to use to merge css files?

I am using Webpack to merge javascript files. But I don't understand how merge css files like javascript

var webpack=require('webpack');

module.exports = {
        context: __dirname ,
        entry: {one:["./script/born.js","./script/create_game.js"], two:["./css/destop.css", "./css/main_page.css"]},
        output: {
            path: __dirname,
            filename: "/production/[name].js"
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            })

Can this be done?

+4
source share
1 answer

To transfer each request ("style.css") into fragments of a record in a separate CSS file. And do not embed css in the JS package, but separate it in the CSS package file (styles.css). Use extract-text-webpack-plugin . There is an example in his documentation:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

json , json , merge-webpack-plugin. togather, join-webpack-plugin.

0

Source: https://habr.com/ru/post/1628117/


All Articles