Question

我有多个角度指令/过滤器/服务，我想用webpack重用它们。所以一般来说我想创建一些文件的角度模块。（根据某些用户输入总是不同，但这不是此票证的问题）

我使用来自我的JS文件的webpack而不是webpack.config，所以它看起来像：

webpack({
        entry: {
        firstFile: path.resolve(__dirname,'../path/to/firstFile.js'),
        secondFile: path.resolve(__dirname,'..//path/to/secondFile.js')
},
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: 'Path to file to babel',
            }
        ]
    }
}, function(err, stats) {
});

因此，在此具体示例中，我从bundle.js和firstFile.js

构建secondFile.js

这个创建包没有问题，但我在这里错过了一些代码来创建angular.module。

它应包含以下内容：

const ngModuleName = 'myModuleName'
export default ngModuleName
const ngModule = angular.module(ngModuleName, [])
ngModule.directive('firstFile', firstFile)
ngModule.filter('secondFile', secondFile)

或者我也可以像使用静态文件那样做，所以直接执行这种代码而不需要任何其他条目：

import firstFile from '../path/to/firstFile.js'
import secondFilefrom '../path/to/secondFile.js'
const ngModuleName = 'myModuleName'
export default ngModuleName
const ngModule = angular.module(ngModuleName, [])
ngModule.directive('firstFile', firstFile)
ngModule.filter('secondFile', secondFile)

有没有办法以某种方式在入境内执行？或者其他一些方法如何将动态源代码添加到webpack进程？

感谢您的建议

Answer 1

我发现可以通过webpack加载器做我想做的事。

基本上我编写自己的加载器，我在webpack.config中使用它，如：

{
    test: bin_dir,
    loader: path.resolve(__dirname, 
        "./my-loader.js?"+JSON.stringify(myLoaderSettings))
},

然后在我的加载器中，我可以轻松地使用条目文件的源来操作。在我的情况下，我添加了新的空白文件，并添加到源我需要的东西。

module.exports = function myLoader(source) {
    // Source code of existing entry
    console.log(source);
    // Query, in my case it's result of JSON.stringify(myLoaderSettings)
    console.log(this.query);
}

如何在webpack配置中运行动态代码

1 个答案: