Question

编辑：我需要直接生成webpack --progress --colors --watch格式到我的网络应用程序（django或rails）模板引擎可以直接包含的文本文件。所以json文件似乎不行。

webpack在module.exports = { entry: "./index.js", output: { path: __dirname, filename: "bundle.[hash].js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.scss$/, loaders: ["style", "css", "sass"]}, ], } };模式下更新js文件后，我想：

使用hashed-filename创建指定路径的副本。
执行一些nodejs代码，列出指定目录中的所有文件名，并将它们写入文本文件。

目前我的配置文件是：

bundle.[hash].js

例如，每次webpack生成/bar文件时，它都会首先将其复制到/bar，然后检查/foo/bar/js.txt中的所有文件名并将这些文件名写入<script type="text/javascript" src="/bar/bundle.sdfklsld.js"></script> <script type="text/javascript" src="/bar/bundle.jkljsdfd.js"></script>以这种格式：

{{1}}

我知道这可能是由bundle-update完成的，但记录的很少。

Answer 1

assets-webpack-plugin将成为您的解决方案。

使用此插件的webpack.config.js应如下所示：

const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin({
    path: path.join(__dirname, 'foo', 'bar'),
    filename: 'js.json'
});

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, 'bar'),
        filename: "bundle.[hash].js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }, 
            { test: /\.scss$/, loaders: ["style", "css", "sass"]}, 
        ], 

    },
    plugins: [
        assetsPluginInstance
    ]
};

现在在路径bar/中，您应该有文件bundle.sdfklsld.js。在文件foo/bar/js.json中，您将拥有：

{
    "main": {
        "js": "/bar/bundle.sdfklsld.js"
    }
}

从那时起，您可以使用正确的捆绑文件路径创建脚本标记。

编辑 - 使用脚本标记

创建文件.txt

如果您想将资源创建为纯文本文件，可以在processOutput中使用assets-webpack-plugin方法。

const assetsPluginInstance = new AssetsPlugin({
    path: path.join(__dirname, 'foo', 'bar'),
    filename: 'js.txt',  // change to .txt

    // it can be little different in your scenario 
    // - currently I'm showing only one file, 
    // but you can tweak it to accept array of files
    processOutput: function (assets) {
        return `<script type="text/javascript" src="${assets.main.js}"></script>`;
    }
});

如何在bundle更新后添加钩子

1 个答案:

编辑 - 使用脚本标记