使用 webpack 提供静态资源答案

【问题标题】：serve static assets with webpack使用 webpack 提供静态资源
【发布时间】：2020-08-29 18:06:38
【问题描述】：

我正在尝试从 webpack 提供静态资产，但我现在正在使用 copywebpack 插件将任何所需的静态资产复制到我的 static_dist/ 目录中，这也是我的构建文件所在的位置。虽然这个 hack 有效，但我现在还需要提供在构建过程之后生成的 stats.json 文件。我不能破解这个并使用 copywebpackplugin，因为当 copywebpackplugin 运行时这个文件还不存在。我对所有的 webpacks 配置选项有点不知所措，而且似乎没有什么可以为这些静态文件提供服务。

// 我的 webpack.config.js

const PATHS = {
    app: path.join(__dirname, '../src/static'),
    build: path.join(__dirname, '../src/static_dist')
};

const basePath = path.resolve(__dirname, '../src/static/');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    output: {
        filename: '[name].js',
        path: PATHS.build,
        publicPath: '/static/'
    },
    devServer: {
        watchOptions: {
            aggregateTimeout: 300,
            ignored: /node_modules/,
            poll: 1000,
        },
        port: 3000,
        contentBase: '/static/',
        host: '0.0.0.0',
        disableHostCheck: true,
        historyApiFallback: { index: '/static/index.html' },
        public: 'localhost:8000',
        writeToDisk: true,
       // hot: true
    },
    plugins: [
          new CopyPlugin([
          { from: '../static/assets/img/favicons', to: '../static_dist/favicons' },

          { from: '../static/assets/img/logos', to: '../static_dist/logos' },
          { from: '../static/assets/img/icons', to: '../static_dist/icons'},
        ]),
        new BundleTracker({ path: PATHS.build, filename: './stats/webpack-stats.json'})
    ],
}

现在，我的包可以通过domain.com/static/app.[some-hash].js 访问，例如，徽标可以通过domain.com/static/logos/somelogo.png 访问。似乎大多数人没有从同一个目录中提供这些服务，但我并不特别关心它们是从哪里提供服务的。只是我可以提供构建后生成的统计文件。

【问题讨论】：

标签： webpack static assets webpack-dev-server

【解决方案1】：

所以你必须等到 webpack 编译完成。您可以使用webpack compiler-hook 编写自己的插件。这是一个示例脚本。未测试！

compiler-hook aftercompile

// fs-extra to copy files (npm install fs-extra)
const fs = require('fs-extra');
const path = require('path');

// own plugin: do what ever 
class MyPlugin {
    apply(compiler) {
        compiler.hooks.afterCompile.tap('MyPlugin', (compilation) => {
            // copy all files and folder (recursive)
            fs.copySync(path.resolve(process.cwd(), 'static/assets/img/favicons'), path.resolve(process.cwd(), 'static_dist/favicons'), { recursive: true })
            // return true to emit the output, otherwise false
            return true;
        });
    }
};

//...

// append your plugin to webpacks plugin section
plugins: [
    //...
    new MyPlugin(),
    //...
]

【讨论】：