webpack&&loader

yuanzhanghu 发布于2019-08-20 16:31 / 941人阅读

摘要：本质上是一个可以模块化使用的加载处理的函数。本文着重讨论以作为样本分析。下面一幅图分别是单和双编译结果图。总结通过简单的例子复习了编译后的文件执行流程探索了编译流程研究意义还是有的。相关问题参考链接参考链接

引言

在回答一个问题时,引发一些疑问,分析总结下,作为备忘

webpack

webpack对于我来说,应用场景主要是,编译打包我通过模块化组织书写的文件,用其提供的各种loader可以让我在js中模块化的加载、管理各种格式resource,以及其附属生态圈各种plugin进行功能拓展(例如常用的CommonsChunkPlugin、UglifyjsWebpackPlugin等等), webpack-dev-server做热加载等等。
具体一些使用配置介绍,可以参考我之前一篇相关文章

webpack 加载方式

首先webpack build后的文件中代码,通过灵活的配置可以被打包成各种标准格式的代码(AMD,CMD等等),
在js中表面上可以通过形如import x form xx、require("x")、require.ensure()等方式引入各种资源,本质上是先通过resolve解析,然后loader加载,类似管道的效果进行各种预先设置好的加工处理。

loader

A webpack loader is a Node module that tells webpack how to take some input content and transform it into output JavaScript.

loader本质上是一个可以模块化使用的加载处理resource的函数。本文着重讨论,以raw loader作为样本分析。

raw loader

Loads raw content of a file (as utf-8).

配置

 entry:{
        "case7":__dirname+"/index.js",
    },
    output:{
        path: __dirname+"/dist",
        filename:"[name].js",
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: "raw-loader"
            }
        ]
    }

index.js

import str from "./file.css";
console.log(str);

执行webpack后,运行case7.js,输出如下

body{
    background: black;
}

更改配置

原配置中添加
{
    test: /.css$/,
    use: "raw-loader"
}
--------------------------------  equivalent way
原配置中替换
{
    test: /.css$/,
        use: ["raw-loader","raw-loader"]
}

更改配置后输出

module.exports = "body{
    background: black;
}"

为什么加载两次后输出会不一样,module.exports从何而来?

module.exports = function(content) {
        
    return "module.exports = " + JSON.stringify(content);
}

上面是raw源码中截取的部分内容,content是原样读取的文件,本身可能带有 , 等,直接启动触发入口

return fn.apply(context, args);  //loaderRunner.js line:119

一开始输出没有等,因为这些特殊字符没有转义,解释执行时保持其含义输出,module.exports是raw-loader中自带,webpack以此作为标识解析loader中输出的模块化资源,否则webpack打包时无法处理资源,默认为空对象{}。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);   执行module函数,有导出借助modle参数,没导出仅做执行分割后文件逻辑使用  //line:20

--------
             (function(module, exports) {     //line:78

            module.exports = "body{
    background: black;
}"

             }),
 编译后文件中自执行函数中的参数,每一个参数都代表一个模块化的资源,模块资源导出的资源被存储到module上。
 ----------------
return module.exports;   // Return the exports of the module,在其它模块中被引入时会被使用   //line:33

重复执行两次,第二次的输入源是第一次的返回值

上面两幅图具体的说明了输出结果的起因,输入源经过stringify后特殊字符被转义,拼接 "module.exports =" 后作为第二次执行的输入源,webpack在模块处理时,同一个资源最后一次输出为准。

下面一幅图分别是单loader和双loader编译结果图。

总结

通过简单的例子,复习了webpack编译后的文件执行流程,探索了编译流程,研究意义还是有的。

相关问题 https://segmentfault.com/q/10...

参考链接: loader1

参考链接: loader2

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

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

关于react+antd样式不生效问题的解决方式

　　1、下面是添加antd组件样式不生效代码　　在入口文件中引入import'antd/dist/antd.css' 　　样式生效，但是生成警告　　WARNINGin./node_modules/antd/dist/antd.css 　　Failedtoparsesourcemap:'webpack://antd/./components/time- 　　picker/s...

3403771864 2022-09-13 22:19 评论0 收藏0
微前端 —— menu&amp;&amp;project1（React）

摘要：前言微前端理论篇微前端项目上一篇中，我们完成了项目的搭建，算是完成了整个微前端架构的一半工程了。项目项目是作为页面的菜单显示的，主要用于路由的控制。源码地址源码地址项目源码地址微前端理论篇微前端项目微前端项目前言微前端 —— 理论篇微前端 —— portal项目上一篇中，我们完成了portal项目的搭建，算是完成了整个微前端架构的一半...

Euphoria 2019-08-26 10:32 评论0 收藏0
react项目关于webpack配置修改

一、前言通过CRA脚手架构建的项目，一般webpack配置是隐藏的，如果要修改，就要另外处理。想要修改webpack通常有两种方式通过插件去增加或覆盖webpack配置（方法一、方法二）或者释放项目中的webpack配置，使之可见，然后可以修改（方法三）本来CRA脚手架将webpack等复杂的配置封装在项目中，后续可以通过更新react-scripts来体验版本升级带来的新特性，但有些时候确实需要...

社区管理员 2022-10-08 14:54 评论0 收藏0
JS前端首屏优化技巧

　　访问时间超过3S对于用户就十分痛苦，为考虑到用户访问效果。为此我，首屏加载时间一顿操作，基本都在2s左右，这样的首屏加载时间，对于用户来说，算是可以接受的。　　那我都哪些操作？下面就为大家展示　　打包分析　　在 package.json 中添加命令　　"report":"vue-cli-servicebuild--report"　　然后命令行执行npm ...

3403771864 2022-09-15 22:15 评论0 收藏0
Next.js踩坑入门系列（二）— 添加Antd &amp;&amp; CSS

摘要：踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念，如果搭建出来就是一个首页标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用框架，相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由陆续更新... 个人对于脚手架的UI有一种执...

lifesimple 2019-08-23 11:38 评论0 收藏0