如何在更新Bundle后添加Hooks

Question

如何在更新Bundle后添加Hooks

4

编辑：我需要直接生成<script type="text/javascript" src="..."></script>格式的文本文件，以便我的Web应用程序（Django或Rails）模板引擎可以直接包含它。因此，JSON文件似乎不行。

在webpack更新js文件处于webpack --progress --colors --watch模式后，我想要：

创建一个具有散列文件名的副本并将其复制到指定路径。
执行一些Node.js代码，列出指定目录中的所有文件名，并将它们写入文本文件。

当前我的配置文件是：

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"]}, 
        ], 

    }
};

例如，每次webpack生成一个bundle.[hash].js文件时，它会先将其复制到/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>

我知道这可能可以通过bundle-update来完成，但是它的文档写得很差。

- tcpiper

Django或Rails在读取.json文件时是否存在问题？ - Everettss

@Everettss 但这需要另一个监视进程来监视JSON文件，并在每次更改时将其转换为文本文件。 - tcpiper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Everettss · Accepted Answer

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`文件

如果您希望将资产作为纯文本文件创建，则可以使用assets-webpack-plugin中的processOutput方法。

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后添加Hooks

编辑 - 使用脚本标记创建.txt文件

编辑 - 使用脚本标记创建`.txt`文件