polyfill

wp4 默认有polyfill,wp5默认没有polifill 因为打包文件太大了

devtool: false

dev下不需要压缩

局部安装webpack

yarn add --dev webpack webpack-cli

mode : ‘development’

创建 webpack.config.js 配置参数

`webpack.config.js` 文件名修改

import ‘css-loader! .//test.css’
可以修改为任意文件名，*重点是打包时拿哪个文件

webpack 依赖树

被依赖的才会被打包

webpack css-loader & style-loader

从右往左从下往上

顺序

×

√

额外

将css-loader的配置modules设置为true，开启css module

less 部分

安装了less-loader 还要安装 less，不然会报错

.browserslistrc(browserslist)

postcss || postcss-loader

browserslist 配置你需要兼容那些浏览器，以及兼容到哪个版本

postcss 使用方式一 __ 手动

安装 需要的 包
postcss postcss-cli autoprefixer
使用：npx --use autoprefixer -o cc.css ./src/*/test.css

postcss 使用方二 __ postcss-loader

这样之后就可以有兼容前缀了

但 postcss-loader 不可以处理 #12345678 这样的颜色为兼容代码，所以还需要引入其他的插件，来对颜色进行处理，
预设 postcss-preset-env ；里面有很多插件包括 autoprefixer

postcss.config.js

由于 .css 文件、scss 文件和 .less 文件都需要兼容处理，如过都加一遍 如图1 的代码那就so繁琐了，所以出现了 postcss.config.js 来进行统一处理
图1

图2

file-loader

如果是css中引入的img 文件，那就需要在css-loader中配置 options:{ esModule: false } ，因为cssloader 会将css中的引入图片转换为require 的形式，这样的话就需要 **.default** ,但css中肯定不行 .default的

打包后的文件名和位置

url-loader

与 file-loader 差不多，但区别是：

url-loader 会将图片以base64的方式放到img 的 url, 减少请求次数，同时也可以通过设置options:{ limit: 大小单位 byte} 【25*1024 = 25kb】来规定那些可以打包，为base64,那些和file-loader一样不需要转base64

wp4