webpack踩坑日记

webpack 4.x 详细入门 这是一个大佬的总结，但是我用webpack5重写该demo时，发现了几个有问题的地方
1:CleanWebpackPlugin

应该这样：

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins: [
    new CleanWebpackPlugin(),  // 所要清理的文件夹名称
  ]

2、merage

应该这样：

const { merge } = require('webpack-merge');

3、分离css 使用demo中的回报错extract-text-webpack-plugin报错TypeError: Cannot set property 'index' of undefined 查了原因是因为我我使用的版本是webpack5.x 而在webpack5.中分离css的配置如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: "css/[id].css"
    })
  ]

4、增加css前缀 (webpack5中测试未生效)

5、消除冗余css （webpack5中报错compiler.plugin is not a function）
6、未测试 处理图片 plugin

7、补充一个webpack配置 externals

8、预加载plugin  Preload&Prefetch 优化前端页面的资源加载

作用：当我们不想下载这个包，只想用CDN时，可以使用这个方法进行配置，减少打包体积。demo

 

面试常会问到Loader、Plugin的区别

loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，通过不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，例如把scss转为css，将ES66、ES7等语法转化为当前浏览器能识别的语法，将JSX转化为js等多项功能。

插件并不直接操作单个文件，它直接对整个构建过程其作用。从打包优化到压缩，到重新定义环境变量，webpack提供了很多开箱即用的插件

从运行时机的角度区分

1. loader运行在打包文件之前，loader为在模块加载时的预处理文件

2. plugins在整个编译周期 都起作用

 

在webpack中配置经常会用到

const path = require('path')

但是很多人不知道

path.join
path.resolve

细说二者的区别：

一、path.join()方法

　　path.join()方法是将多个参数字符串合并成一个路径字符串
　　console.log(path.join(__dirname,'a','b')); 假如当前文件的路径是E:/node/1,那么拼接出来就是E:/node/1/a/b。
　　console.log(path.join(__dirname,'/a','/b','..')); 路径开头的/不会影响拼接，..代表上一级文件，拼接出来的结果是：E:/node/1/a
　　console.log(path.join(__dirname,'a',{},'b')); 而且path.join()还会帮我们做路径字符串的校验，当字符串不合法时，会抛出错误：Path must be a string.

举个🌰：

const path = require('path');
let myPath = path.join(__dirname,'/img/so');
let myPath2 = path.join(__dirname,'./img/so');
let myPath3=path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
 
 
console.log(__dirname);           
console.log(myPath);    
console.log(myPath2);   
console.log(myPath3);  

二、path.resolve()方法

　　path.resolve()方法是以程序为根目录，作为起点，根据参数解析出一个绝对路径

　　以应用程序为根目录

　　普通字符串代表子目录

　　/代表绝对路径根目录

　　console.log(path.resolve());   得到应用程序启动文件的目录（得到当前执行文件绝对路径）   E:\zf\webpack\1\src

　　console.log(path.resolve('a','/c'));   E:/c  ,因为/斜杠代表根目录，所以得到的就是E:/c

　　所以我们一般拼接的时候需要小心点使用/斜杠

　　console.log(path.resolve(__dirname,'img/so'));  E:\zf\webpack\1\src\img\so   这个就是将文件路径拼接，并不管这个路径是否真实存在。

　　console.log(path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif'))    E:\zf\webpack\1\src\wwwroot\static_files\gif\image.gif

　　这个是用当前应用程序启动文件绝对路径与后面的所有字符串拼接，因为最开始的字符串不是以/开头的。

　　..也是代表上一级目录。

举个🌰：

let myPath = path.resolve(__dirname,'/img/so');
let myPath2 = path.resolve(__dirname,'./img/so');
let myPath3=path.resolve('/foo/bar', './baz');
let myPath4=path.resolve('/foo/bar', '/tmp/file/');
 
console.log(__dirname);           
console.log(myPath);    
console.log(myPath2);   
console.log(myPath3);  
console.log(myPath4);