我的 webpack 在启动和发生更改 - 编译时速度非常慢。实际上现在开发速度非常慢。我只使用 greensock 作为供应商，但没有其他任何东西。我也只使用了几张图片..不确定。
这是代码：
const path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// const ASSET_PATH = process.env.ASSET_PATH || '/'; ,
//publicPath: '/dist'
var isProd = process.env.NODE_ENV === 'production';
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
const VENDOR_LIBS =['gsap'];
var cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader', 'sass-loader'
],
publicPath: '/dist'
});
var cssConfig = isProd ? cssProd : cssDev;
module.exports = {
entry: {
index: './src/js/index.js',
vendor: VENDOR_LIBS
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devServer: {
//contentBase: path.join(__dirname, "/dist"),
compress: true,
port: 3000,
hot: true,
stats: "errors-only",
open: true
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
module:{
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use:[
"style-loader" , "css-loader"
]
},
{
test: /\.scss$/,
use: cssConfig
},
{
test: /\.pug$/,
use: ['html-loader', 'pug-html-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: ['file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
'image-webpack-loader'
]
},
{
test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=fonts/'
}
]
},
plugins: [
new htmlWebpackPlugin({
title: '',
template: './src/index.html',
minify: {
collapseWhitespace: true
},
hash: true,
inject: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new ExtractTextPlugin({
filename: 'app.css',
disable: !isProd,
allChunks: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
这是 package.json 脚本：
"scripts": {
"killallProcesses": "killall node && webpack-dev-server",
"start": "webpack-dev-server",
"dev": "webpack -d",
"prod": "npm run clean && NODE_ENV=production webpack -p",
"clean": "rimraf ./dist/* ",
"deploy-gh": "npm run prod && git subtree push --prefix dist origin gh-pages"
}
所以，不确定这里出了什么问题，但编译时间非常慢 - 使用 greensock 作为供应商，但没有其他。所以不确定为什么它这么慢。即使当我启动 webpack 时，速度也非常慢。
Webpack 版本 4 带来了巨大的速度改进。
首先，使用此策略来拆分配置文件以用于生产和开发。只要遵循想法，不要遵循配置，因为其中一些已经过时了。
您的配置是新的配置模式，基于 webpack 4，所以我将对基本模式进行一些调整，您可以使用我链接的策略来拆分它们。
首先：安装
mini-css-extract-pluginconst path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProd = process.env.NODE_ENV === 'production';
const cssDev = ['style-loader', 'css-loader', 'sass-loader'];
const cssProd = [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'];
const cssConfig = isProd ? cssProd : cssDev;
// content hash is better for production which helps increasing cache.
// contenthash is the hash generated given the content of the file, so this is going to change only if the content changed.
const outputFilename = isProd ? '[name].[contenthash].js' : 'name.[hash].js';
module.exports = {
entry: './src/js/index.js',
output: {
// dist folder is by default the output folder
filename: outputFilename
},
// this should go into the webpack.dev.js
devServer: {
//contentBase: path.join(__dirname, "/dist"),
compress: true,
port: 3000,
hot: true,
stats: "errors-only",
open: true
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
// this takes care of all the vendors in your files
// no need to add as an entrypoint.
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
module:{
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use:[MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.scss$/,
use: cssConfig
},
{
test: /\.pug$/,
use: ['html-loader', 'pug-html-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: ['file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
'image-webpack-loader'
]
},
{
test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=fonts/'
}
]
},
plugins: [
new htmlWebpackPlugin({
title: '',
template: './src/index.html',
minify: {
collapseWhitespace: true
},
hash: true,
inject: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new MiniCssExtractPlugin({
filename: 'app.css',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
试试这个，让我知道你得到了什么。
对于 Webpack 5 我必须指定要压缩的文件夹。
这使我的编译时间缩短了约 9 秒：
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
include: /\/src/,
})
],
},
terser-webpack-plugin