尚硅谷webpack知识点梳理

目录

webpack基础配置

五大核心

样式部分

css(less/sass/scss/stylus)

css单独提取

css兼容处理

css压缩

图片、字体图标

HTML

 webpack优化配置

一、提升开发体验

二、提升打包构建速度

三、减少代码体积

四、优化代码运行

---

webpack基础配置

---

五大核心

entry	入口地址(相对路径)
output	出口地址(绝对路径)
module（loader）	处理器
plugins	插件
mode	模式

---

样式

• css(less/sass/scss/stylus)

配置对应loader即可

例如：

module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader", 
          "css-loader",
        ],
      },
    ]
  }

• css单独提取

样式部分会被打包进js文件 ，当js文件加载时会创建style标签生成样式产生闪屏，使用单独提取生成link标签引入解决闪屏问题。

官网地址：MiniCssExtractPlugin | webpack 中文文档

1、npm

npm install --save-dev mini-css-extract-plugin

2、webpack.config.js

//作用是自动生成link标签
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
         MiniCssExtractPlugin.loader,//提取css成单独文件
         "css-loader"//将css资源编译成commonjs模块放入js文件中 
        ],
      },
    ],
  },
};
plugins: [
    new MiniCssExtractPlugin({
      filename: "static/index.css",//合成一个文件后存放的地址
    }),
  ],

• css兼容处理

官网地址：postcss-loader | webpack 中文文档

1、npm

npm install --save-dev postcss-loader postcss postcss-preset-env

postcss-preset-env：智能预设

2、webpack.config.js

//css-loader
...
{
    loader: 'postcss-loader',
    options: {
       postcssOptions: {
          plugins: [
            [
              'postcss-preset-env',
            ],
         ],
      },
   },
},
...
//拓展sass/scss、less等

3、package.json

选择最低兼容浏览器

关于browsetslist配置讲解：​​​​​​browserslist详解 - 简书

//一般配置，如有游览器版本特殊要求可重新配置！！
{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "not dead"
  ]
}

• css压缩

官网地址：CssMinimizerWebpackPlugin | webpack 中文文档

1、npm 

npm install css-minimizer-webpack-plugin --save-dev

2、webpack.config.js

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

plugins:[
 new CssMinimizerPlugin(),
]

---