5

我正在使用 Mac OS X 10.11.3 上的 webpack 构建一个包含静态 HTML 和其他资产的 Web 应用程序。该应用程序与另一台服务器上的 API 通信。

我无法使用 webpack 构建我的应用程序。构建过程似乎在 ts-loader 执行时或周围挂起。我正在像这样运行我的构建：

npm run go --loglevel verbose

从我的 package.json 执行这个命令：

./node_modules/.bin/webpack-dev-server --display-reasons --display-chunks --watch

终端窗口中的输出以

ts-loader: Using typescript@1.7.5 and /Users/mn/Documents/source/J/appstore/store-front/app/ts/tsconfig.json

我尝试删除 node_modules 文件夹并重新安装它们；我试过卸载 webpack 并重新安装；我尝试将我的 webpack.config.js 恢复为我知道有效的版本；但它只是挂在这里！

我的 webpack.config.js 看起来像这样：

var webpack = require('webpack'),
    ReloadPlugin = require('webpack-reload-plugin'),
    path = require('path'),
    ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    WebpackNotifierPlugin = require('webpack-notifier'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

/**
 * optimist has been depracted. Find an alternative? minimist?  
 */
var argv = require('optimist')
    .alias('r', 'release').default('r', false)
    .argv;

/**
 * Useful variables
 */
var cwd = process.cwd();
var DEBUG = !argv.release;
var isDevServer = process.argv.join('').indexOf('webpack-dev-server') > -1;
var version = require(path.resolve(cwd, 'package.json')).version;
var reloadHost = "0.0.0.0";
var npmRoot = __dirname + "/node_modules";
var appDir = __dirname + "/app";

var entry = ["./app/ts/bootstrap"]

if (isDevServer) {
    entry.unshift("webpack-dev-server/client?http://" + reloadHost + ":8080");
}

function makeConfig(options) {
    return {
        cache: true,
        debug: true,
        verbose: true,
        displayErrorDetails: true,
        displayReasons: true,
        displayChunks: true,
        context: __dirname,
        entry: {
            app: entry,
            vendor: './app/ts/vendor.ts'
        },
        stats: {
            colors: true,
            reasons: DEBUG
        },
        devtool: 'source-map',
        recordsPath: path.resolve('.webpack.json'),
        devServer: {
            inline: true,
            colors: true,
            contentBase: path.resolve(cwd, "build"),
            publicPath: "/"
        },
        output: {
            path: path.resolve(cwd, "build"),
            filename: "[name].js",
            publicPath: "/",
            chunkFilename: "[id].bundle.js",

            // Hot Module Replacement settings:
            hotUpdateMainFilename: "updates/[hash].update.json",
            hotUpdateChunkFilename: "updates/[hash].[id].update.js"
        },
        plugins: [
            new webpack.IgnorePlugin(/spec\.js$/),
            new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
            new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] }),
            new ExtractTextPlugin("styles.css"),
            new webpack.DefinePlugin({
                VERSION: JSON.stringify(version),
                ENV: JSON.stringify(options.env)
            }),
            new HtmlWebpackPlugin({
                template: path.join(appDir, "index.html"),
            }),
            new ReloadPlugin(isDevServer ? 'localhost' : ''),
            new WebpackNotifierPlugin({
                title: "Jisc AppStore App"
            }),
        ],
        resolveLoader: {
            root: path.join(__dirname, 'node_modules'),
            modulesDirectories: ['node_modules'],
            fallback: path.join(__dirname, "node_modules")
        },
        resolve: {
            root: [path.resolve(cwd)],
            modulesDirectories: [
                'node_modules', 'app', 'app/ts', '.'
            ],
            extensions: ["", ".ts", ".js", ".json", ".css"],
            alias: {
                'app': 'app',
                'scripts': npmRoot
            }
        },
        module: {
            preLoaders: [
                { test: /\.ts$/, loader: "tslint" }
            ],

            loaders: [
                { test: /\.(png|jp?g|gif)$/, loaders: ["url", "image"] },
                { test: /\.json$/, loader: 'json' },
                { test: /^(?!.*\.min\.css$).*\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap") },
                { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] },
å                { test: /\.html$/, loader: "html" },
                { test: /\.ts$/, loader: 'ts', exclude: [/test/, /node_modules/] },
                { test: /vendor\/.*\.(css|js)/, loader: 'file-loader?name=[path][name].[ext]', exclude: [/node_modules/] },
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?limit=10000&minetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
            ],
            noParse: [
                /\.min\.js/,
                /vendor[\/\\].*?\.(js|css)$/
            ]
        },
        tslint: {
            emitErrors: false,
            failOnHint: false
        }
    }
}

var config = makeConfig(argv)

console.log(require('util').inspect(config, { depth: 10 }))
module.exports = config;

我的 tsconfig.json 看起来像这样：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmitHelpers": false,
        "sourceMap": true
    },
    "filesGlob": [
        "./app/**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "compileOnSave": false,
    "buildOnSave": false
}

谁能建议可能发生的事情？我似乎无法从 webpack 开发服务器或 npm 构建生成任何日志。

4

1 回答 1

7

经过数小时的逆向工程 ts-loader 我终于找到了在我的情况下导致这种“冻结”（看起来）的原因：

我正在构建一个网络爬虫，并在之前的成功部署和现在失败/冻结的部署之间的哈希目录结构中积累了大约 40Gb 的缓存数据。

结果，由于我忘记在我的 tsconfig.json 的“排除”选项中包含根缓存目录，ts-loader 正在遍历缓存目录中的所有子文件夹。所以，它实际上并没有挂起，它只是在查看数百万个文件。

当我将缓存目录添加到排除文件选项时，一切都恢复正常。

希望这可以帮助您解决问题。如果您想了解 typescript 发生了什么，我建议您在 typescript.js 的visitDirectory -function中尝试一些 console.logs 。这就是最终帮助我解决这个问题的原因。

干杯山姆

于 2017-06-28T15:01:18.513 回答