webpack5相对于webpack4做了大量的升级和优化,因此webpack5的学习迫在眉睫!!
首先我们需要下载webpack5,不推荐使用全局的webapck,为了统一webpack版本,建议将webpack和webpack-cli安装在开发依赖中,在学习webpack5之前,我们需要先具备一些基础知识;
browserslistrc 工作流程
browserslistrc是用来配置各种工具适配浏览器的范围,通过在 Can i use 上面的数据来查找;
有两种配置的方法
-
package.json中的
browserslistrc
属性"browserslist": [ ">1%", "last 2 version", "not dead" ]
-
.browserslistrc文件
> 1% last 2 version not dead
postcss工作流程
postcss是 javaScript 转换样式的工具,例如我们需要给所有的css代码自动加浏览器前缀等行为;
npm i postcss --dev
如果想在命令行使用:npm i postcss-cli -D
命令行使用:npx postcss -o ret.css ./src/css/test.css
postcss像一个独立的工具(个人理解是类似于babel的平台),如果想要使用它,必须下载各种插件
命令行使用插件:npx postcss --use autoprefixer -o ret.css ./src/css/test.css
-
给所有的css代码加浏览器前缀:
npm i autoprefixer -D
-
兼容css代码:
npm i postcss-preset-env
-
autoprefixer被包含在postcss-preset-env中,所以只需要postcss-preset-env
-
像下面这样写postcss-loader的重复太多了,可以使用postcss.config.js文件来配置postcss
// postcss.config.js module.exports = { plugins: [ // require('postcss-preset-env') // require('autoprefixer') 'postcss-preset-env' ] }
// 添加 postcss.config.js 配置文件以后无需手动再写配置 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'less-loader' ] } ] }
// 手动写postcss配置
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loade