webpack5

  • webpack5主要是内部效率的优化
  • 对比webpack4,没有太多使用上的改动

基本配置

  • 拆分配置和merge
javascript 复制代码
module.exports = merge(commonConfig, { /** options **/})

  • 启动本地服务
    在dev中添加配置
javascript 复制代码
devServer: {
    static: {
        directory: distPath,
    },
    port: 8089,
    hot: true,
    compress: true,
    open: true, // 自动打开浏览器
    proxy: [{
        context: ['/api'],
        target: 'http://localhost:3000',
        secure: false,
        changeOrigin: true,
        pathRewrite: {'^/api' : ''},
    }],
  },

在package.json script中添加命令

javascript 复制代码
"scripts": {
    "start": "webpack serve --config build/webpack.dev.js",
  },

  • 处理ES6
    使用babel-loader
javascript 复制代码
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      }
    ],
  },

  • 处理样式
javascript 复制代码
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.sass$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      }
    ],
  },

  • 处理图片
    开发环境:
javascript 复制代码
module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },

生产环境

javascript 复制代码
module: {
    rules: [
      {
      	// 小于5 * 1024大小,图片转base64
        test: /\.(png|png|jpg|jpeg|gif)/,
        use: [{ 
                loader: "url-loader", 
                options: { 
                    limit: 1024 * 5, 
                    name: "img/[name].[hash:8].[ext]",
                    outputPath: "img",
                } 
            }
        ],
      },
    ],
  },
  • 模块化
javascript 复制代码
// webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};
javascript 复制代码
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 3000,
  },
});
javascript 复制代码
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 清理 /dist 文件夹
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
});

高级配置

  • 多入口
javascript 复制代码
module.exports = {
  entry: {
    index: path.join(srcPath, "index.js"),
    other: path.join(srcPath, "other.js"),
  },
  output: {
    path: distPath,
    filename: "[name].[contenthash].js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(srcPath, "index.html"),
      filename: "index.html",
      chunks: ["index", "common", "vendor"], // 与entry中的index对应
    }),
    new HtmlWebpackPlugin({
      template: path.join(srcPath, "other.html"),
      filename: "other.html",
      chunks: ["other", "common", "vendor"],
    }), // 与entry中的other对应
  ],
};

  • 抽离CSS文件
javascript 复制代码
module.exports = merge(commonConfig, {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      }
    ],
  },
  plugins: [
    new webpack.CleanPlugin(),
    new DefinePlugin({ "ENV": JSON.stringify("production") }),
    new MiniCssExtractPlugin({ filename: "css/[name].[contenthash:8].css", chunkFilename: "css/[name].[contenthash:8].css" })
  ]
});

  • 抽离公共代码
javascript 复制代码
module.exports = merge(commonConfig, {
  mode: "production",
  optimization: {
    splitChunks: {
        chunks: "all",
        cacheGroups: {
            vendor: {
                name: 'vendor',
                test: /[\\/]node_modules[\\/]/,
                minSize: 0,
                minChunks: 1,
                priority: 1
            },
            common: {
                name: 'common',
                minSize: 0,
                minChunks: 2,
                priority: 2,
            }
        }
    }
  }
});

  • 懒加载
    引用动态数据
javascript 复制代码
setTimeout(() => import(./dynamic-data.js).then(res => {
	console.log(res.default.message);
}))

  • 处理JSX
    .babelrc
javascript 复制代码
{
	"preset": ["@babel/preset-env"],
	"plugins": []
}

webpack.config.js

javascript 复制代码
rules: [
	{
		test: /\.js$/,
		loader: ['babel-loader'],
		include: srcPath,
		exclude: /node_modules/
	}
]

--

  • 处理Vue
    使用vue-loader
javascript 复制代码
{
		test: /\.vue$/,
		loader: ['vue-loader'],
		include: srcPath
}

优化打包效率


优化产出代码


构建流程概述


相关推荐
Chrikk7 分钟前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*10 分钟前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue11 分钟前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man13 分钟前
【go从零单排】go语言中的指针
开发语言·后端·golang
萧鼎1 小时前
Python并发编程库:Asyncio的异步编程实战
开发语言·数据库·python·异步
学地理的小胖砸2 小时前
【一些关于Python的信息和帮助】
开发语言·python
疯一样的码农2 小时前
Python 继承、多态、封装、抽象
开发语言·python
^velpro^2 小时前
数据库连接池的创建
java·开发语言·数据库
秋の花2 小时前
【JAVA基础】Java集合基础
java·开发语言·windows
小松学前端2 小时前
第六章 7.0 LinkList
java·开发语言·网络