首发！这些技巧让你无师自通Webpack配置和优化

2023-09-11 00:49:27

在开发过程中，若不对打包后的代码进行配置和优化，那么当用户打开网站时，往往会面临几秒钟的空白等待时间。为了解决这一问题，我们需要优化打包过程，而这正是Webpack的用武之地。本文将以React和Vue两个流行的框架为例，手把手教你从Webpack的配置和优化入手，让你轻松掌握这项技术。

一、Webpack简介

Webpack是一款用于现代应用程序的静态模块打包工具。它能够将你的代码（或其他资源）以一种适合在浏览器中运行的方式进行打包。Webpack可以通过各种loader和plugin来自定义打包过程，从而实现各种功能。

二、配置Webpack

在package.json文件中，你需要先安装Webpack。React框架使用yarn安装，Vue框架使用npm进行安装。

# React
yarn add webpack webpack-cli

# Vue
npm install webpack webpack-cli --save-dev

安装完成后，你可以创建webpack.config.js文件来配置Webpack。

module.exports = {
  // 入口文件
  entry: './src/index.js',

  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  // 加载器
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};