用户登录

Webpack 默认只能处理 JavaScript .. 如果你打算用它处理其它的东西,比如 html,css 等等,你需要安装对应的 loader ..

webpack 里说的 loader 有点像是一种转换器 .. 它可以把资源从一种形式转换成另一种形式 .. 不过最终得到的还是 JavaScript ..

下面来看一下怎么去使用 loader ... 先在项目里创建一个 css 文件 .. 名字是 style.css .. 添加点样式 .. 设置一下页面的背景颜色 ..

然后打开 entry.js .. 如果你想在这里把刚才创建的 style.css 导入进来,就需要使用一下 loader .. 这里要用的是 css-loader ,用它处理 css 文件 .. 还需要一个 style-loader,它可以去应用在 css 文件里的样式 ..

进入到项目所在的目录 .. 使用 npm install .. 去安装一下 css-loader .. 还有 style-loader .. 把它们也保存到项目的开发依赖里 ...

回到项目 .. 在这个 entry.js 里面,使用一个 require .. 把 style.css 导入进来 .. 在这里我们就需要使用一下刚才安装的那两个 loader,把它放到样式文件的前面 .. 一个是 style .. 后面要加上一个叹号 .. 接着再用一下 css 这个 loader .. 也需要加上一个叹号 ..

保存一下 .. 回到命令行 .. 重新再用 webpack 去打包一下 ..

再回到浏览器 .. 刷新 .. 页面的背景颜色会变成绿色 .. 因为现在生成的 bundle 里面,包含了我们定义的样式 ...

使用 loader 转换文件《 webpack:模块打包 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点