suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Wie entfernt WebPack doppeltes CSS?

a.css 内容:
*{
    margin:0;
}
b.css  内容:
*{
    padding:0;
    margin:0
}

Der Code nach dem Packen mit Webpack lautet

*{margin:0;}*{padding:0;margin:0}

Der Effekt, den ich möchte, ist

*{
   margin:0;padding:0
}

Das Folgende ist der Inhalt der Webpack-Konfigurationsdatei:

const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
// console.log(webpack)
var config = {
  //入口文件
  entry: './src/index.js',
  //输出文件配置
  output: {
    //输出文件名
    filename: 'bundle.js',
    //输出文件路径(绝对路径)
    path: '/dist',
    //输出用于指定资源基础路径,当你的应用中的css包含图片的时候,这将非常有用
    // publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: 'css-loader',
              options:{
                  minimize: true //css压缩
              }
            }
          ]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader'],
          allChunks: true
        })
      },
      {
        //处理js文件或者 react 文件
        test: /\.js|jsx$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        // 处理图片文件/ 可以限制图片大小为多少 转换成base64
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/images/[name].[ext]'
        }
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'static/app.css', allChunks: true }),
    new htmlWebpackPlugin({
      title: 'react learning',
      template: './src/index.html'
    })
  ]
}

module.exports = config

Ist es bei bestimmten Konfigurationen möglich, diese wiederholten Codes zu überschreiben, oder kann *{} *{}dies nur einmal vorkommen und den Inhalt zusammenfassen?

Ich habe gerade erst angefangen zu lernen, ich hoffe, jemand mit Erfahrung kann mir helfen 指点迷精schießen~

给我你的怀抱给我你的怀抱2725 Tage vor1168

Antworte allen(1)Ich werde antworten

  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-12 09:33:15

    这可以通过一个额外的插件配置解决:

    https://www.npmjs.com/package...

    Antwort
    0
  • StornierenAntwort