webpack基础入门(二)

loader介绍

Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数。返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如vue jsx sass 

loader使用

安装

安装用来读取css文件的css-loader，再用style-loader把它插入到页面中

npm install css-loader  style-loader  --save-dev

可以用更加简便的方式安装，直接在package.json中，添加相应的依赖（如上面“css-loader”:"^0.26.1“）然后运行npm install,它会自动帮我们安装相应的依赖

加载css

添加一个style.css文件

body{
background:red
}

修改entry.js

打包webpack entry.js bundle.js

扩展名自动绑定loader

这就是我们的loader的使用方式了，如果每次require CSS文件的时候都要写loader前缀!style!css!这样的东西，显然是一件很麻烦的事情。我们需要它可以根据模块类型(扩展名)来自动绑定需要的loader。

简单方式：将entry.js中的require("!style!css!./style.css")修改为require(""./style.css"),可以改变一个颜色，让效果更明显

     执行 webpack entry.js bundle.js  --module-bind "css=style!css"

这样没成功！因为有！这个特殊字符

重新执行 webpack entry.js  bundle.js  --module-bind "css=style\!css"