尚硅谷webpack知识点梳理

原创

已于 2022-12-01 11:55:02 修改 · 503 阅读

标签

#webpack #前端 #javascript

于 2022-11-28 20:59:35 首次发布

本文详细梳理了webpack的基础配置与优化配置，包括五大核心概念、样式处理、图片和HTML的配置。在优化方面，讨论了提升开发体验、打包速度、代码体积和运行效率的方法，如热模块替换、代码分离、Tree Shaking、图片压缩等，并提供了相关插件和配置的官方文档链接。

webpack基础配置

五大核心

样式部分

css(less/sass/scss/stylus)

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(),
]

最低0.47元/天解锁文章