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

学webpack从几个问题开始

webpack的产生背景

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

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

什么是webpack

附上一张 webpack 官网的图

从图中可以直观的看出 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,我们可以看到如下
  
  这是各种加载器的集合
• 现在举个例子，如果我们要使用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'] 
            }
        ]
    }
}

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