webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于资源打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。但是Webpack本身只能处理 js模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果,例如可以使用loader加载器可以快速编译预处理器(less,sass,coffeeScript)。 Loader 可以在require()引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用。
loaders可以串联,他们应用于管道资源,最后的loader将返回javascript,其它的可返回任意格式(传递给下一个loader)
loaders 可以同步也可以异步
loaders在nodejs下运行并且可以做一切可能的事 loader接受参数,可用于配置里
loaders可以绑定到extension/RegExps 配置
loaders可以通过npm发布和安装 正常的模块儿可以到处一个
loader除了 loaders可以访问配置 插件可以给loaders更多的特性
loaders可以释放任意额外的文件
npm install xxx-loader --save-dev
常用的loader加载器有哪些?
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader //安装
//配置
module: {
loaders: [
{test: /\.css$/, loader: "style!css?sourceMap!postcss"},
{test: /\.less$/, loader: "style!css!less|postcss"},
{test: /\.scss$/, loader: "style!css!sass|postcss"}
]
}
babel-loader:转化ES6代码
jsx-loader:识别js中的 jsx 语法
安装:npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader
新建一个名字为.babelrc的配置文件:
{
"presets": ["es2015","react"],
"plugins":["antd"]
}
webpack.config.js文件配置:
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
]
}
url-loader: 图片处理 npm install --save-dev url-loadr
file-loader: 文件加载 npm install --save-dev file-loader
json-loader:json处理 npm install --save-dev json-loader
raw-loader: html处理 npm install --save-dev raw-loader
webpack.config.js文件配置:
module: {
loaders: [
{test: /\.(jpg|png)$/, loader: "url?limit=8192"},
{test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file'},
{test: /\.json$/,loader: 'json'},
{test: /\.html$/,loader: 'raw'},
]
}
在配置module的loaders。loaders是一个数组,里面的每一个对象都用正则表达式,对应着一种配对方案。loader加载器用于将不同的文件加载到js文件中,比如url-loader用于在js中加载png/jpg格式的图片文件;css/style loader用于加载css文件;less-loader加载器是将less编译成css文件;不同的处理器通过!分隔并串联起来。这里的loader是可以省略掉-loader这样的,也就是原本应该写成style-loader!css-loader!sass-loader。
知道在webpack中使用scss,less之类的东西,需要配置style-loader, css-loader, sass-loader这些,但是在vue-cli的项目中会报Invalid CSS after ...load the styles的错误,这是由于loader重复加载导致的。
我们在写webpack配置文件的时候,应该有注意到经常用到loader这个配置项,那么loader是用来做什么的呢?loader其实是用来将源文件经过转化处理之后再输出新文件。
那是因为,webpack 默认只支持打包 Javascript 模块,比如 import m1 from m1.js,而对于引入了图片模块,webpack 并不知道该如何处理,因此在打包的时候就报错了。对于上述打包图片资源报错的问题
通过配置 name 和 outputPath 选项,可以自定义图片名称和路径。打包后,dist 目录下会生成一个 images 文件夹;url-loader 将图片转化成 base 编码字符串和 main.js 打包在一起。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!