我使用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$/)
] : []),
]
};
};
谢谢!
答案 0 :(得分:1)
尝试从webpack.config.js中删除new DashboardPlugin()
。