使用webpack服务静态资产

问题描述

我正在尝试从webpack提供静态资产，但是现在正在使用copywebpack插件将任何所需的静态资产复制到我的static_dist /目录中，这也是我的构建文件所在的目录。尽管此技巧有效，但我现在现在还需要提供在构建过程之后生成的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编译完成。您可以使用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(),//...
]