webpack的使用（3） ----模块加载器以及webpack打包多个包

来源：互联网发布：js音乐的获取方式编辑：程序博客网时间：2024/06/05 15:40

这里写图片描述
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起作用了。

阅读全文

0 0