webpack的使用（3） ----模块加载器以及webpack打包多个包
程序员文章站
2022-03-03 17:47:00
...
a.js
alert('hello world');b.js
require(./css/cs.css)
var str = require("./a.js")
alert(str)cs.css
div{
color:blue;
}
index.html
<body>
<script src="bundle.js">
</script>
<div>hello world</div>
</body>执行：
由执行结果可以看出：打包css文件会解析错误，这是因为webpack默认只能打包Js,对于css需要加载器的支持。
二：模块加载器
1.安装模块加载器语法格式：
npm install xxx-loader –save-dev
常用：html、css、jsx、coffee、jade、less、sass、style
css-loader
style-loader
html-loader
分别处理css文件和css样式以及html文件。
2. 这里我们先安装这两个loader
npm install css-loader –save-dev
npm install style-loader –save-dev
如果安装失败可以使用淘宝镜像（cnpm bug较多，移植性不好）
cnpm install css-loader –save-dev
cnpm install style-loader –save-dev
3.完成所有准备工作后还需要对原来文件进行修改
b.js中requirecss部分修改如下
require("style-loader!css-loader!./css.css"); 注意：（1）style-loader!css-loader!是固定结构，代表后面文件使用这两个loader来处理。
（2）规定两个loader的顺序必须如上所示，先处理文件，然后处理里面样式的意思。webpack从右向左使用loader.
4.执行
webpack b.js bundle.js
成功后访问index.html可以看到css起作用了。