美文网首页
2-2 Webpack 处理非js文件 Loader

2-2 Webpack 处理非js文件 Loader

作者: winzhyming | 来源:发表于2017-04-01 11:19 被阅读0次

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全局配置,详见后面介绍

相关文章

  • 2-2 Webpack 处理非js文件 Loader

    Webpack只能处理js文. 其他hmtl,css,img需要loader来进行处理。 Loader特性总结: ...

  • loader初识

    loader 介绍 loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解...

  • webpack-loader

    loader 是什么? loader 让 webpack 能够去处理那些非 JavaScript 文件(webpa...

  • 6-1~2 如何编写一个 loader

    1. 简介 loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只...

  • S2-2.Webpack

    安装处理sass的Loader 在webpack.config.dev.js App.js导入sass文件

  • webpack

    loader 转换器 将非js文件转换为webpack可识别的文件类型plugin 插件 在于解决loader无法...

  • webpack打包配置-3-loader的使用

    注意:webpack默认只能打包处理JS类型的文件,无法处理非JS类型文件 如果要处理 非JS类型文件,需手动安装...

  • webpack.config 之loader

    概览 webpack 本身是无法去理解分析非.js文件的,所以这里需要loader模块来帮助,将对应类型的非js文...

  • webpack工程化04(css处理)

    一.css处理 之前讲过,webpack只能打包js文件,处理其他文件需要借助loader和插件,所以今天来将一下...

  • webpack基础(三)js的处理

    本系列文章的webpack版本未webpack4 Js的处理 处理Js模块 loader调用babel/core,...

网友评论

      本文标题:2-2 Webpack 处理非js文件 Loader

      本文链接:https://www.haomeiwen.com/subject/inciottx.html