如您所见,字符串“ts-loader:Using ...”与百分比输出位于同一行。我问自己:“为什么没有换行?”
也许有人也有这个问题,并找到了值得与我们分享的解决方案。
根据需要,我添加了我的WebPack配置。
这是我的webpack.config.js文件......
const path = require('path');
const webpack = require('webpack');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HappyPack = require('happypack');
module.exports = {
node: {
fs: 'empty',
net: 'empty'
},
entry: [
'babel-polyfill',
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'app.[hash].js'
},
resolve: {
symlinks: false,
modules: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules')
],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.json', '.less']
},
devtool: 'eval-source-maps',
module: {
loaders: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader',
},
{
test: /\.less|css$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}, {
loader: 'postcss-loader' // compiles Less to CSS
}]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=assets/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({hash: false, template: './index.hbs'}),
new webpack.LoaderOptionsPlugin({
test: /\.scss$/,
debug: true,
options: {
postcss: function () {
return [precss, autoprefixer];
},
context: path.join(__dirname, 'src'),
output: {
path: path.join(__dirname, 'dist')
}
}
}),
new HappyPack({
loaders: [{
path: 'ts-loader',
query: {happyPackMode: true}
}
],
threads: 6
}),
new ForkTsCheckerWebpackPlugin()
]
};