Webpack只能处理js文. 其他hmtl,css,img需要loader来进行处理。
Loader特性总结:
Loader 可以通过管道方式链式调用,每个 loader 可以把资源转换成任意格式并传递给下一个 loader ,但是最后一个 loader 必须返回 JavaScript。
Loader 可以同步或异步执行。
Loader 运行在 node.js 环境中,所以可以做任何可能的事情。
Loader 可以接受参数,以此来传递配置项给 loader。
Loader 可以通过文件扩展名(或正则表达式)绑定给不同类型的文件。
Loader 可以通过npm发布和安装。
除了通过package.json的main指定,通常的模块也可以导出一个 loader 来使用。
Loader 可以访问配置。
插件可以让 loader 拥有更多特性。
Loader 可以分发出附加的任意文件。
以上总结内容引用网络。
Loader可以通过require添加,可以通过webpack进行全局配置,也可以通过命令行使用
1. 在2-1后续中,新建css文件夹,新建index.css
body: {background-color: #f00;}
2. 安装loader依赖
npm install style-loader css-loader --save
3. 修改index.js文件(通过require引用)
require('!style-loader!css-loader!./css/index.css');
document.write('Hello World !');
document.write(require('./module01'));
4.修改index.js文件(通过命令行 运行)
require('./css/index.css');
document.write('Hello World !');
document.write(require('./module01'));
然后在命令行 运行
webpack index.js bundle.js --module-bind “css=style-loader!css-loader”
5.通过webpack全局配置,详见后面介绍