关于webpack less重复打包问题

Question

首先我使用了一个normalize.less，然后在每一个组件的Less文件里面@import这个normalize文件。如下：

Normalize：

html {
font-family: sans-serif; / 1 /
-ms-text-size-adjust: 100%; / 2 /
-webkit-text-size-adjust: 100%; / 2 /
}
Header 组件：

@import './normalize.less';
.fg-header {

background-color: @fg-black;
height: 88px;
width: 100%;

}
Footer组件：

@import './normalize.less'
.fg-footer {

background: @fg-black;
color: @fg-white;
display: block;
height: 140px;
text-align: center;

}
然后使用less编译后打包成一个style.css文件，但是这个style.css文件里面，配置文件如下：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractLess = new ExtractTextPlugin('./style/style.css');
module.exports = {

entry: {
    base: path.resolve(__dirname,'./dev/app.js'),
    vendors: ['react']
},

...

module: [
    {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
    },
]
plugins: [
    ExtractLess
]

}
但是打包成功后style.css里面出现重复的normalize代码：

html {
font-family: sans-serif; / 1 /
-ms-text-size-adjust: 100%; / 2 /
-webkit-text-size-adjust: 100%; / 2 /
}
html {
font-family: sans-serif; / 1 /
-ms-text-size-adjust: 100%; / 2 /
-webkit-text-size-adjust: 100%; / 2 /
}
.fg-header {

background-color: @fg-black;
height: 88px;
width: 100%;

}
.fg-footer {

background: @fg-black;
color: @fg-white;
display: block;
height: 140px;
text-align: center;

}
这怎么配置能够解决？

Answer 1

不要用less的import，提供两个思路：

方法一：把公共的css/js单独用一个entry打包，然后再HtmlWebpackPlugin中引入；

entry:{
    vendor：[
        'jquery',
        'assets/css/common.css',
        'assets/js/common.js'
    ],
    
    app: 'app/entry.js'
}

plugins:[

    new HtmlWebpackPlugin({
        chunks:['vendor', 'app']
    })

]

方法二：使用CommonsChunkPlugin，具体配置看文档，偷懒的话甚至无需配置；然后在entry.js直接require你要用的静态资源就行；插件自动提取公共文件；

Answer 2

直接在index.js里面import './normalize.less';应该可以吧，不需要每个less引入吧