Webpack 2 不会在构建时终止

Question

我正在使用 webpack 2.7.0 来构建我的 TS + REACT 项目。

它构建得很好，但是在构建时，webpack 卡在了这个问题上:

C:\projects\simba\client>npm run build
> react-redux-typescript-webpack-starter@0.1.0 build C:\projects\simba\client
> bash utils/build.sh

yarn install v1.0.2
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.90s.
yarn run v1.0.2
$ rimraf dist
Done in 0.43s.
{ env: { build: true, sourceMap: true } }
ts-loader: Using typescript@2.7.2 and C:\projects\simba\client\tsconfig.json
Hash: ecd4451df6c56bc75fec
Version: webpack 2.7.0
Time: 104419ms
                                                               Asset       Size  Chunks                    Chunk Names
                                                          index.html  743 bytes          [emitted]
   [0] ./~/react/react.js 56 bytes {0} [built]
  [30] ./~/react-dom/index.js 59 bytes {0} [built]
  [32] ./~/tslib/tslib.es6.js 8.4 kB {0} [built]
  [74] ./~/react-redux/es/index.js 230 bytes {0} [built]
  [76] ./~/connected-react-router/lib/index.js 6.75 kB {0} [built]
 [293] ./src/reducers/index.ts 10.4 kB {1} [built]
 [487] ./src/utils/constants.ts 1.07 kB {1} [built]
 [602] ./~/react-hot-loader/patch.js 40 bytes {0} [built]
 [603] ./src/index.tsx 2.11 kB {1} [built]
[1113] ./~/react-hot-loader/index.js 40 bytes {0} [built]
[1118] ./~/react-hot-loader/lib/patch.js 209 bytes {0} [built]
[1119] ./~/react-hot-loader/lib/patch.prod.js 24 bytes {0} [built]
[1120] ./src/app.tsx 1.76 kB {1} [built]
[1225] ./~/redux-responsive/lib/index.js 583 bytes {0} [built]
[1331] multi react-hot-loader/patch ./src/index.tsx 40 bytes {1} [built]
    + 1317 hidden modules
Child html-webpack-plugin for "index.html":
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] ./~/html-webpack-plugin/lib/loader.js!./index.html 951 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

我必须使用 ctrl c 手动关闭它，然后使用 Y(是)。

webpack 中是否有任何命令，或者我需要设置任何标志，以便它不会卡在最后并退出 webpack 命令？ 这样我就可以在此基础上构建更多脚本。

这是我从项目的根目录启动 webapack 的命令:

webpack --config configs/webpack.config.js --env.build --env.sourceMap

这是我的 configs/webpack.config.js 源代码:

const path = require('path');
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PATHS = {
  root: path.resolve(__dirname, '..'),
  nodeModules: path.resolve(__dirname, '../node_modules'),
  src: path.resolve(__dirname, '../src'),
  dist: path.resolve(__dirname, '../dist'),
  assets: path.resolve(__dirname, '../assets'),
  locale: path.resolve(__dirname, '../assets/locale'),
  localeDefaultLanguage: path.resolve(__dirname, '../assets/locale/default.json'),
};
global.PATHS = PATHS;

module.exports = (env = {}) => {
  console.log({
    env
  });
  const isBuild = !!env.build;
  const isDev = !env.build;
  const isSourceMap = !!env.sourceMap || isDev;

  return {
    cache: true,
    devtool: isDev ? 'eval-source-map' : '',
    context: PATHS.root,
    entry: {
      app: [
        'react-hot-loader/patch',
        './src/index.tsx',
      ],
    },
    output: {
      path: PATHS.dist,
      filename: true ? '[name].js' : '[name].[hash].js',
      publicPath: '/',
      // chunkFilename: '[id].chunk.js',
    },

    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      modules: ['src', 'node_modules'],
    },

    // externals: {
    // },

    module: {
      rules: [
        // typescript
        {
          test: /\.tsx?$/,
          include: PATHS.src,
          use: (env.awesome ? [{
            loader: 'react-hot-loader/webpack'
          },
            {
              loader: 'awesome-typescript-loader',
              options: {
                transpileOnly: true,
                useTranspileModule: false,
                sourceMap: isSourceMap,
              },
            },
          ] : [{
            loader: 'react-hot-loader/webpack'
          },
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true,
                compilerOptions: {
                  'sourceMap': isSourceMap,
                  'target': isDev ? 'es2015' : 'es2015',
                  'isolatedModules': true,
                  'noEmitOnError': false,
                },
              },
            },
          ]),
        },
        // json
        {
          test: /\.json$/,
          include: [PATHS.src],
          use: {
            loader: 'json-loader'
          },
        },
        // static
        {
          include: [path.resolve(__dirname, '..')],
          test: /\.(png|jpg|svg|ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          loader: 'file-loader?name=[path][name].[ext]',
        },
        // css
        {
          include: [path.resolve(__dirname, '..')],
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        // less
        {
          include: [path.resolve(__dirname, '..')],
          test: /\.less/,
          loader: 'style-loader!css-loader!less-loader'
        },
      ],
    },

    plugins: [
      new CopyWebpackPlugin([{
        context: PATHS.assets,
        from: `**/*`,
        to: PATHS.dist
      },], {
        copyUnmodified: true
      }),
      new DashboardPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(isDev ? 'development' : 'production'),
        },
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: (module) => module.context && module.context.indexOf(
          'node_modules') !== -1,
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
      }),
      ...(isDev ? [
        new webpack.HotModuleReplacementPlugin({
          // multiStep: true, // better performance with many files
        }),
        new webpack.NamedModulesPlugin(),
      ] : []),
      ...(isBuild ? [
        new webpack.LoaderOptionsPlugin({
          minimize: true,
          debug: false
        }),
        new MinifyPlugin({}),
        new HtmlWebpackPlugin({
          template: './index.html',
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
      ] : []),
    ]
  };

};

谢谢!

Answer 1

尝试删除 new DashboardPlugin()来自你的 webpack.config.js。