webpack出口（output）学习

filename

1. 支持hash写法：例如：[name].[contenthash].js
2. 支持输出js文件到指定目录下：例如：static/js/[name].[contenthash].js

chunkFilename

1. 支持输出按需加载的文件到指定目录下：例如：static/asyncjs/[name].[contenthash].js

publicPath

1. 指定程序下所有资源文件的基础路径地址，发送到path的文件都会从publicPath为基础路径开始引用
2. 静态资源托管到cdn服务，需要设置类似cdn.example.com/assets

clean

在生成文件之前清空 output 目录

asyncChunks

创建按需加载的异步 chunk

module.exports={
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'static/js/[name].[contenthash].js',
    clean: true,
    asyncChunks: true,
  },
}

// async.js
export default 'aaaaaa';

// index.js
span.onclick = () => {
  import('./js/async.js').then((asyncModule) => {
    console.log(asyncModule.default);
  })
}

mini-css-extract-plugin

实现把样式代码抽成一个单独chunk，需配合html-webpack-plugin插件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = (env, argv) => {
  return {
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[contenthash].js',
      clean: true,
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash].css',
      }),
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/i,
          use:
            [
              argv.mode === 'development' ?
              'style-loader' : MiniCssExtractPlugin.loader,
              'css-loader'
            ],
        }
      ],
    },
  }
}

静态资源文件打包到独立文件夹下

const path = require('path')
module.exports = (env, argv) => {
  return {
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[contenthash].js',
      clean: true,
    },
    module: {
      rules: [
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
          generator: { 
            filename: 'static/images/[name].[contenthash][ext]'
          }
        },
      ],
    },
  }
}