webpack进阶之loader篇

qylost 发布于2019-08-19 18:33 / 2141人阅读

webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder

一、loaders之预处理

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"}
  ]
}

二、loaders之 js处理

babel-loader

jsx-loader

npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

栗子

新建一个名字为.babelrc的文件

{
  "presets": ["es2015","react"],
  "plugins":["antd"]
}

新建一个名字为webpack.config.js文件

module.exports ={
 entry: "./entry.js",
 output: { path: __dirname,
 filename: "bundle.js"
 },
 module: {
loaders: [
  {test: /.js$/, loader: "babel", exclude: /node_modules/},
  {test: /.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: "style!css"} ]
  }
};

三、loaders之图片处理

url-loader

npm install --save-dev url-loader

module: {
  loaders: [
    {test: /.(jpg|png)$/, loader: "url?limit=8192"},
  ]
}

四、loaders之文件处理

file-loader

npm install --save-dev file-loader

module: {
  loaders: [
    {
      test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: "file"
      },
  ]
}

五、loaders之 json处理

json-loader

npm install --save-dev json-loader

module: {
  loaders: [
    {test: /.json$/,loader: "json"},
  ]
}

六、loaders之 html处理

raw-loader

npm install --save-dev raw-loader

module: {
  loaders: [
    { test: /.html$/,loader: "raw"},
  ]
}

云服务器 GPU云服务器进阶篇 webrtc进阶信令篇 webrtc进阶-信令篇之基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79693.html

webpack进阶之插件篇

摘要：基本环境搭建就不展开讲了一插件篇自动补全前缀官方是这样说的，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。上一篇博客讲解了webpack环境的基本，这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自动补全css3前缀 autop...

Tonny 2019-08-19 18:33 评论0 收藏0
vue + typescript 进阶篇

摘要：进阶篇本文是继新项目起手式之后的进阶踩坑配置，所以推荐先行阅读前文完整阅读完之后，基本可以顺利在新项目中使用了另外特别注意不推荐在已有项目上强加，因写法的组件跟之前的组件不兼容，若上的话需要修改之前写的组件配置完整版可参考，若没配置出来 vue + typescript 进阶篇本文是继 Vue + TypeScript 新项目起手式之后的进阶+踩坑配置，所以推荐先行阅读前文 ...

lemanli 2019-08-21 17:28 评论0 收藏0
Webpack Loader 高手进阶(二)

摘要：如果函数没有返回值的话，那么进入到下一个的函数的执行阶段。这也是异步化的一种方式如果执行后有返回值，执行开始下一个执行以上就是对于在构建过程中执行流程的源码分析。文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手...

jackzou 2019-08-26 13:35 评论0 收藏0
Webpack Loader 高手进阶(三)

摘要：相关的内容为这样对于一个处理的第二阶段也就结束了，通过去拦截不同类型的，并返回新的，跳过后面的的执行，同时在内部会剔除掉，这样在进入到下一个处理阶段的时候，不在使用的范围之内，因此下一阶段便不会经由来处理。文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手...

ivydom 2019-08-23 16:12 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0