包更新后如何添加钩子 [英] how to add hooks after bundle update

问题描述

我需要直接将 <script type="text/javascript" src="..."></script> 格式生成为我的网络应用程序的文本文件(django or rails) 模板引擎可以直接包含.所以json文件好像不行.

I need to directly generate <script type="text/javascript" src="..."></script> format to a text file which my web app(django or rails) template engine can directly include. So a json file seems not ok.

webpack 在 webpack --progress --colors --watch 模式下更新 js 文件后，我想:

After webpack update the js file in webpack --progress --colors --watch mode, I want to :

1. 创建一个带有哈希文件名的副本到指定路径.
2. 执行一些 nodejs 代码，列出指定目录中的所有文件名并将它们写入文本文件.

目前我的配置文件是:

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 中的所有文件名code>/bar 并将这些文件名以这种格式写入 /foo/bar/js.txt:

For example, every time webpack generate a bundle.[hash].js file, it will first make its copy to /bar, then check all filenames in /bar and write these filenames to /foo/bar/js.txt in this format:

<script type="text/javascript" src="/bar/bundle.sdfklsld.js"></script> 
<script type="text/javascript" src="/bar/bundle.jkljsdfd.js"></script>

我知道这可能是由 bundle-update 完成的，但它是记录不全.

I know this maybe done by bundle-update, but it's poorly documented.

推荐答案

assets-webpack-plugin 将为您提供解决方案.

assets-webpack-plugin will be solution for you.

带有此插件的 webpack.config.js 应如下所示:

Your webpack.config.js with this plugin should look something like this:

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 中，您将拥有:

Now in path bar/ you should have file bundle.sdfklsld.js. In file foo/bar/js.json you will have:

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

从那时起，您就可以使用正确的捆绑文件路径创建脚本​​标签了.

From that point you are good to go and create your script tags with proper path to bundle files.

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

If you want to create your assets as a plain text file you can use processOutput method in 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>`;
    }
});

这篇关于包更新后如何添加钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！