码不停息

# 常用loader及plugin总结

# 常用loader

# 处理css

  • style-loader
  • css-loader
  • less-loader(或其他)

rules:[
    ...
    // 处理less
    {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
    },
    // 处理css
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    },
    ...
    ]

注意loader处理顺序

# 处理图片

  • url-loader
  • file-loader
{
    test:/\.(jpg|png|gif|jpeg)$/i,
    use:[
        {
            loader:'url-loader',
            options:{
                limit:100,
                name: '[name]_[hash:7].[ext]',
                outputPath: './static/images',
                publicPath:'../static/images'
            }
        }
    ]
}

url-loader还可以处理一些其他格式的文件

   {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
    },
    {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
    }

虽然没有使用file-loader 但是这个loader也是需要下载,因为url-loader依赖于file-loader

# 处理js(ES6)

  • babel-loader
    {
        test: /\.js$/,
        exclude: /(node_modules)/,  // (不处理node_modules) 优化处理加快速度
        use: {
            loader: 'babel-loader',
            options: {         // options选项
                presets: ['@babel/preset-env'],  // presets设置的就是当前js的版本
            }
        }
    }

# 常用plugin

# 处理HTML

  • html-webpack-plugin
const HTMLWebpack = require('html-webpack-plugin'); //html模板

 plugins: [
    new HTMLWebpack({
        template: path.resolve(__dirname, '../index.html');
    })
]

该插件可以让html作为模板输出

# 配置分离

  • webpack-merge(合并配置) 有了这个插件,我们可以更加风骚的写webpack配置文件
// 我们可以吧公用的配置写在webpack.base.js文件中,然后在webpack.dev及webpack.pro不同环境写不同配置
// 最后再用此插件吧配置文件合并
const base = require('./webpack.base');
const dev = require('./webpack.dev');

module.exports = merge(base, dev);  // 合并两个配置文件

# 分离压缩CSS

  • mini-css-extract-plugin (分离css)
  • optimize-css-assets-webpack-plugin (压缩css)

webpack会把所有的文件都打包成js 但是这会导致打包的文件过大,所有我们要把css分离出来 这时候就需要mini-css-extract-plugin来做这件事情

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //分离css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: './static/css/[name].[hash].css', //输出 css路径
    }),
    new OptimizeCssAssetsPlugin() //css压缩
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 这里可以指定一个 publicPath
              // 默认使用 webpackOptions.output中的publicPath
              publicPath: '../'
            },
          },
          'css-loader',
        ],
      }
    ]
  }
}

TIP

这个插件应该只用在 production 配置中，并且在loaders链中不使用 style-loader

← 手写vue-cli →