为什么webpack2 css-loader和style-loader打包过后页面插入了2次style标签？

Question

最近在学习webpack2，前面都很顺利。
一直到在js文件中导入css文件并打包插入到页面上的时候出了问题，
同一个css文件居然打包之后在页面上插入了2次。
这是webpack.config.js中css-loader的配置信息`

        {
            'test': /\.css$/,
            'exclude': path.resolve(__dirname, 'node_modules'),
            'include': path.resolve(__dirname,'./src/'),
            'use':[
                {
                    'loader': 'style-loader'
                },
                {
                    'loader': 'css-loader',
                    'options': {
                        'importLoaders': 1
                    }
                }
            }`

打包完成信息如下：

Hash: 950be3f67414b530adfd
Version: webpack 2.5.1
Time: 1289ms
            Asset     Size  Chunks             Chunk Names
js/main.bundle.js  6.03 kB       0  [emitted]  main
       index.html  6.45 kB          [emitted]
   [0] ./src/style/main.css 1.03 kB {0} [built]
   [1] ./src/script/main.js 145 bytes {0} [built]
   [2] ./~/css-loader?{"importLoaders":1}!./src/style/main.css 299 bytes {0} [built]
   [3] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [4] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
   [5] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
Child html-webpack-plugin for "index.html":
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] ./~/html-webpack-plugin/lib/loader.js!./index.html 1.41 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

JS文件只是简单的模拟导入而已：

import '../style/main.css'

function Init(){
    return 'ready!';
}

package.json配置表：

{
  "name": "maiyeh5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-latest": "^6.24.1",
    "css-loader": "^0.28.1",
    "html-webpack-plugin": "^2.28.0",
    "postcss-loader": "^2.0.5",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  }
}

最后成功打包，但是打包之后再网页上查看的时候!就变成下面图片那样，一个css文件插入了两次。
图片描述

多谢指点，感激不尽。

Answer 1

我也遇到同样的问题，您解决了吗

Answer 2

模板文件使用了用htmlWebpackPlugin

将这部分功能去掉就好了