webpack 打包压缩js和css的方法示例

我很乐意为您讲解 “webpack 打包压缩js和css的方法示例”的完整攻略。首先，我们需要明确的是，webpack是一个强大的静态模块打包工具，它可以通过配置文件对JavaScript、CSS、图片等资源进行打包、压缩，并优化加载速度，提高应用程序的性能。

下面是一个简单的webpack配置示例，其中包含了两个常用的loader和一个插件，用于打包压缩JS和CSS：

1. 使用babel-loader将ES6以上版本转换为ES5可执行的代码

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配JS文件
        exclude: /(node_modules|bower_components)/, // 排除node_modules和bower_components
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

1. 使用MiniCssExtractPlugin将CSS提取到单独的文件中，并使用css-loader和postcss-loader对CSS进行打包和压缩。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配CSS文件
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader', // 打包CSS
          'postcss-loader' // 压缩CSS
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css', // 输出的CSS文件名
    })
  ]
}

在以上两个示例配置中，我们使用了babel-loader将ES6以上版本的JavaScript代码转换为ES5可执行的代码，并使用了css-loader和postcss-loader对CSS进行打包和压缩。并且使用MiniCssExtractPlugin将CSS提取到单独的文件中，以减少页面加载时间。最终输出的文件通过output选项设置进行输出。

除此之外，webpack还可以利用uglifyjs-webpack-plugin、optmize-css-assets-webpack-plugin等插件来进一步压缩JS和CSS文件，提高应用程序性能。

注意，在使用以上loader和插件之前需要先安装所需依赖，可以使用npm或者yarn来安装。

示例1中需要安装的依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-env

示例2中需要安装的依赖：

npm install --save-dev css-loader style-loader postcss-loader mini-css-extract-plugin

希望以上内容可以帮助您更好的理解webpack打包压缩JS和CSS的方法。