javascript - webpack 如何將重複的css去重
a.css 内容:
*{
margin:0;
}
b.css 内容:
*{
padding:0;
margin:0
}經過webpack 打包之後的程式碼是
*{margin:0;}*{padding:0;margin:0}我想要的效果是
*{
margin:0;padding:0
}如下是 webpack 設定檔內容:
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是不是某些配置可以覆蓋掉這些重複的程式碼, 或者說可以*{} *{}這樣的只出現一次, 把裡面的內容打包到一起?
剛入門學習, 希望有前人來給小弟指點迷精. 射射~
