webpack是什么

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序用来解决以下问题：某些浏览器不认识ES6的语法，比如const、箭头函数等语法；ES6中的模块化语法；CommonJS的模块化语法可以通过webpack对其进行打包，让其转换成浏览器可以直接识别的语法；

webpack工作中的应用

给目录起别名
让我们的项目支持sass、less等预处理器
项目中手动的添加TypeScript的支持
安装性能分析工具、使用gzip压缩代码、引用cdn的资源，公共代码抽取

webpack安装

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

webpack的配置文件

建立一个webpack.config.js的文件
entey可以指定入口文件，默认是找当前目录下的 src/index.js作为入口
filename指定打包后文件名
path指定打包后的文件路径

const path = require('path');
module.exports = {
  entry:'./src/main.js', //入口
  output:{
    filename:"bundle.js", // 打包之后的文件名
    //  path.resolve(__dirname)获取到当前文件所在目录
    path: path.resolve(__dirname, 'build'), // 必须提供绝对路径
  }
}

指定配置文件

比如我们需要的配置文件不是webpack.config.js的名字，而是修改成了 wk.config.js呢？

可以在package.json中增加一个新的脚本

其他配置可在如下这里查看

.browserslistrc文件的编写

开发中需要解决针对不同的浏览器支持的特性：比如css特性、js语法，之间的兼容性；

.browserslistrc文件是填写我们项目需要支持哪些浏览器

>1% 
last 2 version
not dead

>1% 表示市场占有率大于1%的浏览器
last 2 versions：每个浏览器的最后2个版本。
dead 24个月内没有官方支持或更新的浏览器
no dead 就是24个月内有更新的浏览器

webpack中loader的运用

loader是什么？

loader 可以用于对模块的源代码进行转换
比如加载某个模块时，webpack其实并不知道如何对其进行加载，我们必须使用对应的loader来完成这个功能 loader的配置方式
方式一

  module:{
    rules:[
      { 
        test: /\.css$/, // 利用正则匹配资源
        use: [{loader:'要使用的loader',options:"给loader传的值可以是字符串或者对象"}]
      },
    ]
  }

方式二三

  module:{
    rules:[
      { 
        test: /\.css$/, // 利用正则匹配资源
         // loader:"使用的loader"方式二
         // use:["要使用的loader","要使用的loader"] 方式三
      },
    ]
  }

样式文件loader的配置

安装css-loader和style-loader

npm install css-loader -D
npm install style-loader -D

css-loader只是负责将.css文件进行解析，style-loader将解析后的css插入到页面

  module:{
    rules:[
      // 正则表达是.需要转义，加$表示以css结尾
      { 
        test: /\.css$/, // 利用正则匹配资源
        use: [
        'style-loader',
        'css-loader'
        ],
      }
    ]
  }

需要注意loader的加载顺序是从后往前的所以需要先把css-loader放在数组最后面，顺序一定不能错

less的处理

npm install less -D

postcss-load

postcss-load以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置

postcss-preset-env也是一个postcss的插件可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill
他是根据.browserslistrc文件去适配响应的浏览器的

安装

npm install postcss-loader -D
npm install postcss-preset-env -D

webpack.config.js中的配置
postcss.config.js没有抽出来的写法

很多地方都会用postcss.config.js所以将其抽出来

重点解析 css-loader中为何要传importLoaders
这是因为当css中通过@import引入，新的css样式时候,postcss-loader已经执行过了，所以不会再执行了。
使用importLoaders 可以当执行到css-loader时候再往回执行postcss-loader
importLoaders的值表示往回执行几个loader
如下情况值就为2，依次类推

加载外部资源

加载图片

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现(转为base64)。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。 我们想要实现，大的图片直接导出，小的图片使用asset/inline转为base64

常用修改filename的placeholder

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
[hash:]：截图hash的长度，默认32个字符太长了；
[path]：文件相对于webpack配置文件的路径；

加载字体图标

Plugin的使用

Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

各个插件的引用方式不一定一样，可以查看源码看他是怎么导出的

CleanWebpackPlugin打包时自动删除上次打包的文件

npm install clean-webpack-plugin -D

HtmlWebpackPlugin打包时生成index.html文件

npm install html-webpack-plugin -D

默认是根据内部默认的ejs模板生成的

使用自定义的ejs模板

template：指定我们要使用的模块所在的路径；
title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

DefinePlugin 定义常量

DefinePlugin允许在编译时创建配置的全局常量（不需要单独安装）

请注意，由于本插件会直接替换文本，因此提供的值必须在字符串本身中再包含一个实际的引号。通常，可以使用类似 '"./"' 这样的替换引号，或者直接用 JSON.stringify('./')。

CopyWebpackPlugin复制文件

这个插件是将单个文件或整个目录（已存在）复制到构建目录

安装

npm install copy-webpack-plugin --save-dev

ignore后面跟的是忽略的文件

webpack5笔记