webpack/vue.config.js 中配置常用的 loader 与 plugin

前言

在项目中难免会处理一些文件, 比如：样式、音频、字体、图片等。
那对应的 loader 如何配置呢个？
今天我们来聊一聊开发中比较常用的 loader 配置

常用 Loader 配置

1. url-loader

安装： npm install url-loader -D
查看包的历史信息： npm info url-loader
注意： url-loader 内部会用到 file-loader，所以必须下载，但不用配置
安装：npm install file-loader

在 webpack/vue.config.js 中 的 module 配置 rules：
module: [
    rules: [
        // 处理图片
        {
            test: /\.(png|jpe?g|gif|svg)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 1024*5, // 把小于 5kb 的文件 转换成 Base64 格式
                    name: 'img/[name].[ext]' // 指定路径
                    
                }
            }
        },
        // 处理字体
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10240, // 可根据实际情况自行设定
                    name: 'fonts/[name].[hash:8].[ext]'
                }
            }
        },
        // 处理音视频
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10240, // 可根据实际情况自行设定
                    name: 'static/media/[name].[hash:8].[ext]'
                }
            }
        },
    ]
]

2. css-loader 与 style-loader

css-loader：把 css 搞到 js 中去
style-loader：再吧 js 中的 css 搞到 style 中
安装：npm install -D css-loader style-loader

module: [
    rules: [
        // 处理样式
        {
            test: /\.css$/,  
            // loader 处理方式 是 从下往上 从右往左
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.less$/,  
            // loader 处理方式 是 从下往上 从右往左
            use: ['style-loader', 'css-loader', 'less-loader']
        },
        {
            test: /\.sass$/,  
            // loader 处理方式 是 从下往上 从右往左
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        // 处理 stylus
        {
            test: /\.(styl|stylus)$/,  
            // loader 处理方式 是 从下往上 从右往左
            use: ['style-loader', 'css-loader', 'stylus-loader']
        }
    ]
}

3. html-webpack-plugin

  功能：把打包好的文件自动引入到入口文件 index.html 文件中
  安装：npm install html-webpack-plugin -D
  在 webpack.config.js 中引入
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  // 配置
  plugins:[
    new HtmlWebpackPlugin({
      // 默许指定 模板的路径 否则会篡改网页 title
      template: resolve('public/index.html')
    })
  ]

4. clean-webpack-plugin

  功能：在每次打包时，先删除上次生成的文件
  安装：npm install clean-webpack-plugin -D
  在 webpack.config.js 中引入
  const CleanWebpakPlugin = require('clean-webpack-plugin');
  // 配置
  plugins:[
    new HtmlWebpackPlugin({
      // 默许指定 模板的路径 否则会篡改网页 title
      template: resolve('public/index.html')
    }),
    // 必须指定路径，是数组，可指定多个路径
    new CleanWebpakPlugin(['dist'])
  ]