Question

我正在根据用户输入创建动态生成的webpack模块。

Standard static way您在config中指定文件夹或文件，并使用babel-loader正常运行webpack。

var path = require('path');

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var dir_js = path.resolve(__dirname, 'js');
var dir_html = path.resolve(__dirname, 'html');
var dir_build = path.resolve(__dirname, 'build');

module.exports = {
    entry: path.resolve(dir_js, 'main.js'),
    output: {
        path: dir_build,
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: dir_build,
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: dir_js,
            }
        ]
    },
    plugins: [
        // Simply copies the files over
        new CopyWebpackPlugin([
            { from: dir_html } // to: output.path
        ]),
        // Avoid publishing files when compilation fails
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        // Nice colored output
        colors: true
    },
    // Create Sourcemaps for the bundle
    devtool: 'source-map',
};

但是，如果我想动态制作模块，我不能使用静态配置文件。所以我谷歌有点如何直接从JS文件调用webpack与一些特定的配置。我找到了THIS

可以选择打电话：

var webpack = require("webpack");    
// returns a Compiler instance
webpack({
    // configuration
}, function(err, stats) {
    // ...
});

所以我创建了一些非常简单的index.js：

var webpack = require('webpack');
webpack({
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
}, function(err, stats) {
    // console.log(stats);
    console.log(err);
});

不幸的是，当我通过node index.js调用此文件时，没有任何事情发生，即使console.log(err)输出为null 从这一点来说，我没有找到任何有用的东西。

所以我希望如果这里有任何有经验的人，可以告诉我我做错了什么。或者另外给我建议如何创建它的另一种方式

Answer 1

检查您的输入文件是否存在，如果存在，您的代码应该有效。

我建议添加console.log(stats.toString());。这样，您将获得一些额外的有用输出。即使没有错误。

我删除了main.js并从统计信息获得了以下输出：

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main.js in <some dir>

如果它存在，那么这样的东西应该出现在你的终端中：

$ node index.js
Hash: 042eac64f1d594f97cd4
Version: webpack 1.13.1
Time: 38ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.41 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 19 bytes [rendered]
    [0] ./main.js 19 bytes {0} [built]

Answer 2

通常，即使配置是动态的，最好在webpack配置中使用完整路径：

entry: path.resolve(__dirname, 'main.js');

（同样适用于output.filename）

如何从.js文件而不是webpack.config配置和运行webpack

2 个答案: