什么是webpack，学透之前持续更

分手后的思念是犯贱 2021-12-19 00:23 303阅读 0赞

####  学webpack从几个问题开始 ####

##### webpack的产生背景 #####

随着互联网的高速发展，传统的css+html+js简单布局已经很难满足用户的需求了，取而代之的是内容更加丰富，拥有更复杂的JavaScript代码和依赖包的‘网页’。而这样在实际开发中效率很低，为了寻求高效率，前端领域用不断实践打开了潘多拉之门…

*  模块化，将程序划分各个功能块
 *  使用预编译语言,typescript,sass,less
 *  …  
    \*\* ~~ 但是 ~~ \*\*这些东西却不能被浏览器所编译，需要进行额外的处理转换成css，js才能被识别，而手动处理却非常繁琐，有什么办法能处理这个问题成了一个新的问题，而这时候----webpack便应运而生

##### 什么是webpack #####

附上一张 webpack 官网的图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]

###### 从图中可以直观的看出 webpack 的设计理念：化繁为简 ######

核心和概念

> 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

简单来说就是 将你写的代码(typescript,sass,less)，转变成浏览器能看懂的语言(css,javascript)

###### webpack是怎么来处理这些东西的呢 ######

webpack 有着各种健全的加载器（loader）在处理这些事情

*  如:css-loader  
    `传统上我们会在html文件中引入CSS代码，借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。`  
    加载.css,css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。  
    引用资源的合适 loader 是 file-loader和 url-loader，你应该在配置中指定
 *  style-loader通过 style 标签 注入到dom中建议将 style-loader 与 css-loader 结合使用

##### webpack的使用 #####

*  拿vue来说，打开项目中的webpack.base.conf.js,我们可以看到如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]  
    这是各种加载器的集合
 *  现在举个例子，如果我们要使用sass、那就得引入针对sass加载器，那怎么办弄呢？下面展示步骤
    
     *  在main.js中引入  
        `import '你的路径/index.scss'`
     *  安装  
        `npm i sass-loader -D`本地安装。此加载器需要依赖`node-sass`，`cnpm i node-sass -D`  
        （常用cnpm安装，npm很多时候失败，内部依赖，不需要规则配置，npm uninstall node-sass出错先删除）。
     *  增加匹配规则  
        sass也属于样式，也需要经过style-loader 和 css-loader处理。

module.exports = {
        module:{   
            rules:[   
                {
                     test:/\.scss$/,  
                    use:['style-loader','css-loader','sass-loader'] 
                }
            ]
        }
    }

\----先写到这，有空更

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20211219/802b230e5c7b428ca4e3a5348b8bdea8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]: /images/20211219/1f3a8aa915cf4b9e8138f1144a3eeaa4.png