20170622-webpack之loader篇

付永刚发布于2019-08-20 17:27 / 2839人阅读

摘要：从打包后的文件中提取出特定的内容到一个新的文件中，需要配合使用，由指定提取文件的路径提取文件，使其变成代码。在打包过程中会将代码中资源的原始路径替换成资源的新路径在打包文件夹下资源的路径。

less-loader

处理代码中引入的less文件，通过对应的less模块，将less转变为css

css-loader

通过css-loader，使得在css中能够使用@import和url(...)的方式实现require()的功能

style-loader

style-loader将所有计算后的样式加入页面中(将样式表嵌入webpack打包后的JS文件中即css和js会被打包到同一个文件中)

babel-loader

处理jsx文件，结合babel对jsx中的es6语法、jsx语法进行处理转换

file-loader

{
    test: /.(eot|svg|ttf|woff2?)$/,
    use: ["file-loader?name=assets.fonts/[name].[ext"]
}

在查询字符串参数中指定的路径下生成对应的文件(拷贝过去)

url-loader

对于比较小(url-loader的查询参数进行了限制)的图片，可以将其转换为base64形式，如果图片大小超过限制，那么webpack就会使用file-loader去处理文件，并且所有的查询参数都会传递给file-loader，file-loader会在查询字符串参数中指定的路径生成对应的文件。

extract-loader

Extract text from bundle into a file.从打包后的js文件中提取出特定的内容到一个新的文件中，需要配合file-loader使用，由file-loader指定提取文件的路径

html-loader

提取html文件，使其变成js代码。这个loader需要结合extract-loader和file-loader一起使用

{
    test: /.html$/,
    use: [
        "file-loader?name=[name].html",
        "extract-loader",
        "html-loader"
    ]
}

上面的代码是webpack的一段配置代码，具体的作用是：首先经过html-loader：提取html代码，生成对应的js代码;然后经过extract-loader：抽取出这部分html代码；最后经过file-loader，在file-loader的查询字符串参数指定的位置生成新的html文件。

为什么一个html文件要经过上述loader的处理？

在开发过程中，我们将所有的代码、资源放在一个路径下，当打包后，会生成一个打包文件夹，其中包含了打包后的代码以及所有资源文件(image、fonts)。webpack在打包过程中会将代码中资源的原始路径替换成资源的新路径(在打包文件夹下资源的路径)。html中如果存在元素，并且使用的本地图片，在打包后我们希望元素的路径同样替换成对应资源的新路径，因此，需要经过上述loader的处理，当然在webpack.config.js文件的entry和output部分，同样得指定对应的html文件，如下所示

entry: {
    vendor: "./src/vendor/index.js",
    // 将index.jsx和index.html文件打包到一起，在打包过程中webpack会将index.html依次经过html-loader、extract-loader、file-loader的处理
    xx: ["./src/xx/index.jsx", "./src/xx/index.html"]
  },
  output: {
    path: path.resolve(__dirname, "public"),
    publicPath: "/"
    filename: "assets/js/[name].js",
    chunkFilename: "assets/js/chunk.[id].js",
  }

..... 省略

{
    test: /.html$/,
    use: [
        "file-loader?name=[name].html",
        "extract-loader",
        "html-loader"
    ]
}

个人理解

webpack在打包项目的过程中，会将一些代码、资源(css、image、fonts)通过extract-loader、file-loader、ExtractTextPlugin等一些loader和插件打包/复制到新的路径中去，webpack会将代码中的旧路径替换成新路径。

云服务器 idc机房托管之基础篇 Loaders Loader babel-loader

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

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

20170622-webpack之plugin篇

摘要：该插件的作用是为组件分配，通过这个插件会分析使用频率最多的模块，并未他们分配最小的，越小表示模块被找到的速度会更快使用方法用于抽取公共的模块 extract-text-webpack-plugin extract-text-webpack-plugin主要是为了抽离css样式,并将样式打包成css文件 const ExtractTextPlugin = require(extract-...

Dean 2019-08-20 17:27 评论0 收藏0
webpack进阶之loader篇

webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laodershowImg(https://segmentfault.com/img/remote/1460000005742040); 一、loaders之预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 ...

qylost 2019-08-19 18:33 评论0 收藏0
webpack进阶之插件篇

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

Tonny 2019-08-19 18:33 评论0 收藏0
前端面试之webpack篇

摘要：面试你一般问你的原理，的原理，你有用那些优化措施前端开发已经模块化，它改进了代码库的封装和结构。这么说负责的是处理源文件的如，一次处理一个文件。小心的运用他们。因为随着项目的增长，它们会变得很难驯服。还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面...

cangck_X 2019-08-21 16:47 评论0 收藏0
前端面试之webpack篇

摘要：面试你一般问你的原理，的原理，你有用那些优化措施前端开发已经模块化，它改进了代码库的封装和结构。这么说负责的是处理源文件的如，一次处理一个文件。小心的运用他们。因为随着项目的增长，它们会变得很难驯服。还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面...

fyber 2019-08-05 12:10 评论0 收藏0