Question

我正在使用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构建中生成任何日志。

Answer 1

经过几个小时的反向工程ts-loader后，我终于发现了导致这种“冻结”的原因（在我看来似乎如此）：

我正在构建一个Web scraper，并在先前成功部署和现在失败/冻结部署之间的散列目录结构中积累了大约40Gb的缓存数据。

原来，因为我忘了在tsconfig.json的“exclude”选项中包含root缓存目录，所以ts-loader遍历缓存目录中的所有子文件夹。所以，它实际上并没有挂起，它只是浏览了数百万个文件。

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

希望这可以帮助您解决问题。如果你想查看打字稿的内容，我建议你在 typescript.js 的 visitDirectory -function中试验一些console.logs。这最终帮助我解决了这个问题。

干杯萨姆

＆＃34; npm run＆＃34;挂在ts-loader（webpack）上

1 个答案: