Webpack+Vue全栈打包实战指南（下）：CSS/图片/插件/ES6解析与总结

2023-12-02 01:46:51

Webpack进阶指南：CSS、图片打包、常用插件和ES6解析

1. CSS和图片文件打包

1.1 CSS打包

Webpack默认不处理CSS文件。引入CSS加载器（如style-loader和css-loader）可解决此问题。style-loader将CSS注入HTML中，css-loader解析import语句并将其转换为模块。

npm install --save-dev style-loader css-loader

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

1.2 图片文件打包

Webpack也不处理图片文件。引入图片加载器（如file-loader和url-loader）可解决此问题。file-loader将图片复制到输出目录，url-loader将图片转换为base64编码的字符串并将其注入到CSS或JavaScript中。

npm install --save-dev file-loader url-loader

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        },
        'file-loader'
      ]
    }
  ]
}

2. 常用插件

2.1 HtmlWebpackPlugin

该插件可自动生成HTML文件，省去了手动创建的麻烦。

npm install --save-dev html-webpack-plugin

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: './index.html'
  })
]

2.2 CleanWebpackPlugin

该插件可自动清理输出目录，省去了手动清理的麻烦。

npm install --save-dev clean-webpack-plugin

plugins: [
  new CleanWebpackPlugin(['dist'])
]

2.3 MiniCssExtractPlugin

该插件可将CSS文件提取到单独的文件中，提高页面加载速度。

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

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../'
          }
        },
        'css-loader'
      ]
    }
  ]
}

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css'
  })
]

3. ES6语法解析

Webpack默认不解析ES6语法。引入ES6解析器（如babel-loader）可解决此问题。

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

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