webpack-记录1

1. 模块化

   1. 前端模块化的原因

      1. 最早期就只是html和css处理网页
      2. 发明一种语言来操作html和css js
      3. 早期只是在html文件里直接在script标签里写一些脚本代码
      4. 随着Ajax的出现,慢慢形成了前后端的分离
      5. 客户端需要完成的事情越来愈多,代码量与日俱增
      6. 为了应对代码量的增加,通常会将代码组织在多个js文件中，进行维护，就会出现许多问题

   2. 早期模块化的缺点

      1. 全局变量命名冲突问题

      2. 这种方式对js文件引入顺序依耐性强

      3. 可以用闭包的方式解决命名冲突 ，但是代码不可复用

      4. 早期的解决方案：

         1. 闭包+函数调用后导出一个对象

         2. //模块a中的代码  这种方式只需要模块名字不同
            var moduleA=(function(){
            	var obj={}
              var flag=true
            	var sum =function(x,y){
            		return x+y
            	}
            	obj.flag=flag
            	obj.sum=sum
            	return obj
            })()
            
            //模块b中的代码
            if(moduleA.flag){
                  console.log('我定义的a变量是true')
            }
            

      5. 常用模块化规范

2. 什么是webpack

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

3. 为什么要使用它

   1. 分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用
   2. 处理模块间的依赖
   3. 处理浏览器不识别的文件

4. webpack中使用es6语法

5. webpack基于node使用

   1. 必须先安装node

6. 为什么全局安装后，还要局部安装

   1. 如果直接在终端输入webpack命令，会在全局中找对应的包，使用的是全局安装的包
   2. 如果在packjson中执行脚本命令，会优先在本地项目中找对应的包 就是node_modules，没找到才会去全局中找
   3. 全局安装和局部安装和使用的区别

7. 在webpack4.x中，约定大于配置

   1. 默认的打包入口路径：src文件夹下index.js文件
   2. 默认的打包出口路径：dist文件夹下的main.js文件
   3. webpack.config.js下mode: development

8. 安装热更新

   1. cnpm i -D webpack-dev-server

   2. 运行可以直接在node_modules中找到webpack-dev-server运行

   3. 一般我们是在脚本中添加代码

      1. "scripts": {
         "serve": "webpack-dev-server --open --port 9999"
         },
         

   4. 可以加一些参数

      1. --open 自动打开
      2. --port 端口号设置
      3. --hot
      4. --host
      5. 浏览器设置
      6. --config 自定义配置文件

   5. 会默认打包生成一个main.js文件，位置在根目录下，我们看不到，是存在于内存中的

   6. webpack-dev-server的原理
      就是搭建一个本地node服务器，然后热更新
      默认运行在8080端口
      默认打开的是index.html文件 这个文件是 htmlPlugin插件根据你指定的文件生成一个名字为 index.html 的文件
      默认引入了一个看不见的只存在与内存中的main.js文件

   7. devServer: {
          contentBase: path.join(__dirname, 'src'), //构建项目目录
          compress: true,
          port: 9999,
          open: true
        },
      

   8. 脚本代码会覆盖上面的配置代码

9. html插件

   1. cnpm i -D html-webpack-plugin

   2. 导包

   3. 在配置文件中创建plugin节点

   4. 创建对象

   5. const path = require('path')
      const htmlWebPackPlugin = require('html-webpack-plugin'); //html插件
      const htmlPlugin = new htmlWebPackPlugin({
        template: path.join(__dirname, './index.html'),//源文件  __dirname当前文件的目录  拼接
        filename: 'index.html'
      })
      module.exports = {
        // 模式
        mode: "development",
        //devserver
        // --open --port 9000
        devServer: {
          contentBase: path.join(__dirname, 'src'), //构建项目目录
          compress: true,
          port: 9999,
          open: true
        },
        // 插件
        plugins: [
          htmlPlugin
        ],
        //loader
        module: {
          rules: [
            {
      
            }
          ]
        }
      }
      

   6. 根据源文件生成一个index.html文件在内存中，我们看不到，可以单击网页源文件查看，此时会看到多引入了一个main.js文件，于是我们修改index.html中的代码，不需要引入了，这个文件类似于main,js文件都是在内存中

10. loader和plugin的区别

11. Webpack的常用Loader有哪些(高频率), 插件怎么配. 如何优化webpack的配置.

区别

https://www.cnblogs.com/cowboybusy/p/10419516.html
https://blog.csdn.net/bandaoyu/article/details/104562824
https://www.zhihu.com/question/270332768?sort=created
https://blog.csdn.net/sinat_17775997/article/details/116194154?spm=1001.2014.3001.5502