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 dev サーバーまたは npm ビルドからログを生成できないようです。

4

1 に答える 1