webpack基础知识，笔记

webpack是一个打包工具，一般一个js认为是一个模块，webpack默认只能识别js文件，如果要打包其他的如图片，txt，css等就需要使用loader。loader告诉webpack如何去打包对应的文件

样式loader：写css的方法有很多，less，scss，stylus最常见，每一种方法打包的时候需要3个loader，用stylus举例,它需要3个loader：stylus-loader css-loader stylus-loader,各自作用：

style-loader：把css挂在到dom上

css-loader：处理css

styus-loader：处理styus，转化为css

devtool：报错提示，可以很清楚的定位到错误行数以及该行内的第多少字符。开发环境建议用 cheap-module-eval-source-map ，报错可以定位到本地原始(打包之前)代码的文件以及行数，因为要准确定位到某个字符会消耗性能，所以建议定位到错误的行数就可以

const HtmlWebpackPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 分离样式文件

// 费时分析（打包所需要的时间）

　　const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

　　const smp = new SpeedMeasurePlugin();

• babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
• @babel/core Babel 编译的核心包
• @babel/preset-env Babel 编译的预设，可以理解为 Babel 插件的超集

webpack5新增资源打包

　　1、asset/resource 将资源分割为单独的文件，并导出 url，类似之前的 file-loader 的功能.

　　2、asset/inline 将资源导出为 dataUrl 的形式，类似之前的 url-loader 的小于 limit 参数时功能.

　　3、asset/source 将资源导出为源码（source code）. 类似的 raw-loader 功能.

　　4、asset 会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认） 的时候会使用 asset/inline，否则会使用 asset/resource

 

热更新：

　　先安装　　npm install webpack-dev-server -D

　　然后在package.json里面修改命令　　"dev": "webpack-dev-server"

　　引入webpack　　const webpack = require("webpack");  

　　添加配置项

　　　　devServer: {

　　　　  contentBase: './dist'，

　　　　  hot: true,

　　　　  hotOnly: true, // hmr不生效的时候也不让页面刷新

　　　　}

　　Plungin里面添加　　new webpack.HotModuleReplacementPlugin()

　　入口文件更新：　　　

　　　　if (module.hot) {
　　　　  module.hot.accept('）// 利用这个方法来更新代码修改之后对应页面的修改
　　　　}

resolve：

　　alias：引入文件用绝对路径，如：import Basic from '@/components/basic';

　　extensions：引入文件时不需要带.js

　　resolve：告诉 webpack 优先 src 目录下查找需要解析的文件，会大大节省查找时间

babel-loader   cache-loader 缓存

webpack5内置插件：terser-webpack-plugin 压缩js

optimize-css-assets-webpack-plugin：压缩css

purgecss-webpack-plugin：清除无用的css

Tree-shaking： 剔除没有使用的代码，以降低包的体积

optimization.splitChunks：分包配置，切块打包