根据webpack的版本安装不同版本的css-loader、style-loader

webpack是前端常见的模块打包工具，但是webpack只能用来处理js代码及其间的依赖。而前端除了js外还有很多文件，包括css、图片等等，这些文件的打包需要webpack的扩展来实现，这个扩展就是loader。
遇到了这样一个问题，在一个js文件中引入了css文件，需要依赖css-oader和style-loader引入，webpack打包这个js文件的时候，报错，具体操作步骤在下面

首先，webpack安装的版本为3.12.0，使用命令进行全局安装：

cnpm indtall webpack@3.12.0 -g 

同时要在js文件中引入css文件的话，需要安装css-loader和style-loader对应的依赖，执行以下命令安装

cnpm install style-loader css-loader --save

执行上面命令之后，安装了比较新版本的css-loader和style-loader，版本如下：

然而再用webpack打包文件的时候，报错，文件代码如下：
runoob2.js

module.exports = "It works from runoob2.js.";

runoob1.js

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2"));

使用webpack将runoob1.js文件内容打包到bundle.js文件中，错误信息展示：

原因是webpack和css-loader、style-loader版本不对应导致的，先将css-loader和style-loader模块依赖卸载掉，重新安装,具体安装什么版本的，首选需要明确自己的webpack版本（前面是3.12.0），接下来就是对照webpack的版本我们去找其他loader模块应该安装的版本
1、进入githhub官网，搜索style-loader

2、点击第一个链接，通过tag选择不同版本，以v1.0.0版本为例，查看对应的package.json文件

可以知道该版本支持以3,4开头的webpack，满足自己主机的webpack版本号。适配成功

3、最后使用npm install --save-dev style-loader@1.0.0进行安装(–save-dev表示只在开发环境中使用)

同理，安装css-loader也是按照上面步骤进行。（css-loader安装版本：0.28.11）