高级前端-webpack

什么是webpack：webpack is a module bundler

Tapable是webpack的底层依赖

loader让webpack可以处理除了js和json文件以外的别的类型的文件

module.rules.{use: '', test: ''} 目前用的是chainWebpack可以链式调用loader和plugin，并且可以修改对应loader或者插件的属性

webpack的主要配置

1. Entry
2. Output
3. loader
4. plugin

webpack代码分离

1. 多入口
2. splitChunks
3. 动态导入

为什么要用webpack

从Entry文件开始，加载并处理所有的文件，最终转为bundle.js文件

webpack怎么用

1. 全局安装webpack + webpack-cli

2. 全局直接使用webpack xxx.js

3. 项目中安装webpack + webpack-cli, 使用npx webpack，默认入口文件./index.js，默认配置文件：webpack.config.js

4. 可以自己创建一个webpack.config.js用来修改webpack的配置

5. 也可以重定义webpack.config.js的名字 => vue.config.js，但是打包命令得这么写：npx webpack --config vue.config.js

6. 为了不用每次都去调用npx，可以使用npm script去做优化，在package.json中配置相关script，例如：

   

    

     

      

     
     

      

       script: {
      
     
    

     

      

     
     

      
    
       build: 
       'webpack'
      
     
    

     

      

     
     

      

       }
      
     
   

使用npm run build去代替npx webpack; script的执行会优先从当前所在项目的node_module中去找相关指令

7. webpack-cli的作用是为了可以在命令行运行webpack，不装的话不能运行

8. webpack是基于node.js去编写的，因为打包的功能需要去遍历项目中用到的所有文件，需要用到一些原生功能，js是做不到的，所以用node.js是很容易实现的

打包结果命令行输出分析

1. Hash：本次打包唯一的hash值

2. asset: 打包出的文件名

3. chucks: 打包的文件的唯一值得集合

4. chuck names: 打包文件的名字的集合

5. chuck names怎么来的：main

6. entrypoint: 入口文件

7. webpack.config.js的默认mode是production，也可以设置成development，如果是production会默认压缩代码，development不会压缩代码

loader

模块不一定是js文件，也有可能是css文件，图片文件，webpack默认只知道打包js模块文件，其他类型的文件的打包就需要借助loader

   

    

     

      

     
     

      

       module: {
      
     
    

     

      

     
     

      

           rules: [{
      
     
    

     

      

     
     

      

               test: 
       /\.jpg$/
      
     
    

     

      

     
     

      

               use: {
      
     
    

     

      

     
     

      

                   loader: 
       'file-loader'
      
     
    

     

      

     
     

      

               }
      
     
    

     

      

     
     

      

           }]
      
     
    

     

      

     
     

      

       }
      
     
   

1. loader的作用过程，当webpack遇到非js模块的时候，去找可以识别当前模块的loader，对应的loader会把对应的module文件编译成对应的文件放到dist目录下面

2. vue项目中动态引入本地图片，需要require或者import，应该就是loader不会再编译？？？这边有待研究

3. vue里面打包分两种，一种会被loader处理，public目录中的则直接拷贝一份放到dist目录中

4. loader提供了options提供修改打包编译的属性，例如可以修改打包后的文件名，文件输出位置等

5. url-loader和file-loader的区别

url把图片变成base64的路径，放到bundle.js中，file-loader把图片打包到dist目录下， url-loader提供了limit的option，如果小于limit默认使用url-loader，大于limit使用file-loader的方式打包

6. loader的执行顺序是从后往前执行

7. 样式加载相关loader: postcss-loader(auto-prefix), css-loader(用来解析模块化css文件的loader), style-loader(把编译后的css文件，添加到header里面去)

plugin(可以在webpack打包到某个时刻的时候，帮我们干一些事情)

1. 帮助友好的进行打包，没有plugin, index.html不会被打包到dist中

2. 使用html-webpack-plugin,在webpack打包结束后，自动生成一个index.html文件，并把打包生成的js自动引入到index.html中

3. clean-webpack-plugin，每次打包，删除dist目录下的文件

webpack-dev-server

1. webpack-dev-server监听到数据代码的改变，就会重新编译，网页会自动刷新，这样原来呈现的网页内容就不见了

2. 为了解决以上自动刷新的问题，于是出现了HMR，Hot Module Replacement plugin，只替换修改的内容

   

    

     

      

     
     

      

       devServer: {
      
     
    

     

      

     
     

      
    
       hot: 
       true,
      
     
    

     

      

     
     

      
    
       hotOnly: 
       true 
       // 
       热跟新加载失败的时候，也不刷新页面
      
     
    

     

      

     
     

      

       }
      
     
   

3. 不使用HMR的时候，修改了某个模块的代码，会把所有的代码刷新

Babel (高版本的js转低版本的js，polyfill)

1. babel-loader只是一个webpack和babel之间通信的桥梁

2. babel-loader的options中使用

   

    

     

      

     
     

      

       rules: [
      
     
    

     

      

     
     

      
    
       test: 
       '\.js$',
      
     
    

     

      

     
     

      
    
       exclude: 
       'node_module',
      
     
    

     

      

     
     

      
    
       use: 
       'babel-loader', 
       // webpack 与 babel通信的桥梁
      
     
    

     

      

     
     

      
    
       options: {
      
     
    

     

      

     
     

      
        
       // 解决业务代码的配置，preset中文名预置，大概意思就是制定对应的语法解析器
      
     
    

     

      

     
     

      
        
       presets: [
      
     
    

     

      

     
     

      
            
       '@babel/preset-env', 
       // 把高版本的js语法转成低版本，但是实现不了新的语法糖，需要使用polyfill
      
     
    

     

      

     
     

      

                   {
      
     
    

     

      

     
     

      
                
       // target的作用是制定目标环境进行babel
      
     
    

     

      

     
     

      
                
       'target': {
      
     
    

     

      

     
     

      
                    
       'chrome': 
       '64'
      
     
    

     

      

     
     

      

                       },
      
     
    

     

      

     
     

      
                
       'useBuiltIns': 
       'usage' 
       // 如果不设置这个属性，打包出来的js里面会编译出来所有的polyfill，添加了这个属性之后，编译出来的js里面只有用到的polyfill才会被编译
      
     
    

     

      

     
     

      

                   }
      
     
    

     

      

     
     

      

               ],
      
     
    

     

      

     
     

      
        
       // plugin用来实现除了语法解析的一些别的功能，例如‘transform-remove-console’
      
     
    

     

      

     
     

      
        
       plugins: [‘transform-remove-console’]
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

       ]
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       // 对应需要polyfill的js文件中，提前import 'babel-polyfill'
      
     
   

持续更新中。。。