ts-loader使用happypack后打包更慢了
代码如下
const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const env = process.argv.slice(-1)[0];
const devUrlLoader = 'url-loader?limit=8192&name=[hash:8].[name].[ext]';
const prodUrlLoader = 'url-loader?limit=8192&name=[hash:8].[name].[ext]&outputPath=assets/images/&publicPath=assets/images';
// 获取自己定义的要覆盖antd默认样式的文件
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, '../src/assets/style/theme.less'), 'utf8'));
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
// loader: 'happypack/loader?id=js',
loader: 'babel-loader',
},
{
// loader: 'happypack/loader?id=ts', // 用这个打包速度慢了很多
loader: 'ts-loader',
},
],
include: [
path.join(__dirname, '../src'),
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'happypack/loader?id=js',
// loader: 'babel-loader',
},
],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
}],
fallback: 'style-loader',
}),
},
{
test: /\.sass$/,
use: ['style-loader', 'css-loader', 'sass-loader?outputStyle=expanded&indentedSyntax'],
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader?outputStyle=expanded'],
},
{
test: /\.less$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'happypack/loader?id=less_src', // 用这个打包速度慢了很多
}],
fallback: 'style-loader',
}),
},
{
test: /\.less$/,
exclude: /src/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'happypack/loader?id=less_node_modules', // 用这个打包速度慢了很多
}],
fallback: 'style-loader',
}),
},
{
test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/,
loader: env === 'development' ? devUrlLoader : prodUrlLoader,
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
},
],
},
plugins: [
],
resolve: {
modules: [
path.resolve(__dirname, '../src'),
'node_modules',
],
extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
alias: {
src: path.resolve(__dirname, '../src/'),
},
},
};
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const lessToJs = require('less-vars-to-js');
const fs = require('fs');
// happypack 加速打包
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const commonConfig = require('./webpack.base.js');
// 获取自己定义的要覆盖antd默认样式的文件
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, '../src/assets/style/theme.less'), 'utf8'));
module.exports = function (env) {
return merge(commonConfig, {
cache: true,
devtool: 'cheap-module-eval-source-map',
entry: {
bundle: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8000',
'webpack/hot/only-dev-server',
'./src/index.tsx',
],
vendor: ['react', 'react-dom'],
lib: ['antd'],
},
output: {
path: path.join(__dirname, '/../dist/assets'),
filename: '[name].js',
publicPath: '/assets/',
sourceMapFilename: '[name].map',
},
devServer: {
historyApiFallback: true,
noInfo: false,
hot: true,
open: true,
stats: 'minimal',
contentBase: './src/',
publicPath: '/assets/',
compress: true,
port: 8000,
proxy: {
'/api/*': {
target: 'http://localhost:9090',
secure: false,
changeOrigin: true,
},
},
},
optimization: {
runtimeChunk: {
name: 'manifest',
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin({
filename: 'style.css',
disable: false,
allChunks: true,
}),
new HappyPack({
id: 'ts',
threadPool: happyThreadPool,
loaders: [
{
path: 'ts-loader',
query: { happyPackMode: true, transpileOnly: true },
},
],
}),
new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
new HappyPack({
id: 'js',
loaders: ['babel-loader'],
threadPool: happyThreadPool,
}),
new HappyPack({
id: 'less_src',
loaders: [{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
namedExport: true,
camelCase: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
},
}, {
loader: 'postcss-loader',
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
}],
threadPool: happyThreadPool,
}),
new HappyPack({
id: 'less_node_modules',
loaders: [{
loader: 'css-loader',
options: {
importLoaders: 1,
},
}, {
loader: 'postcss-loader',
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
}],
threadPool: happyThreadPool,
}),
],
});
};
不明白是为什么，打包反而更慢了，难倒我配置错了？
这是我的项目，完整的代码在这里
https://github.com/wanliyunya...
2018/8/9
不仅仅ts慢了，打包less样式也变慢了。我觉得是我的配置问题呢！！！大神们帮我看看呗
https://juejin.im/post/5cc813... ，有兴趣的可以参考这个链接，速度确实提升了不少