Open cq112233 opened 1 month ago
We need to see your webpack config to be able to give you any feedback. Best would be to create a reproduction repository.
We need to see your webpack config to be able to give you any feedback. Best would be to create a reproduction repository.
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const webpack = require('webpack')
const threadLoader = require('thread-loader');
const vueLoaderConfig = require('./vue-loader.conf')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');
const WebpackBar = require('webpackbar')
const jsWorkerPool = {
// options
// 产生的 worker 的数量,默认是 (cpu 核心数 - 1)
// 当 require('os').cpus() 是 undefined 时,则为 1
workers: 2,
// 闲置时定时删除 worker 进程
// 默认为 500ms
// 可以设置为无穷大, 这样在监视模式(--watch)下可以保持 worker 持续存在
poolTimeout: 2000
};
const cssWorkerPool = {
// 一个 worker 进程中并行执行工作的数量
// 默认为 20
workerParallelJobs: 2,
poolTimeout: 2000
};
const vueWorkerPool = {
// 一个 worker 进程中并行执行工作的数量
// 默认为 20
workerParallelJobs: 10,
poolTimeout: 2000
};
threadLoader.warmup(vueWorkerPool, ['vue-loader']);
threadLoader.warmup(jsWorkerPool, ['babel-loader']);
threadLoader.warmup(cssWorkerPool, ['css-loader', 'sass-loader']);
const fs = require('fs')
const isExistDllFile = fs.existsSync(path.join(__dirname, '../dist/vendors-manifest.json'))
console.log('是否存在dll文件,包含第三方库', isExistDllFile)
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
pages: resolve('src/pages')
}
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'cache-loader',
},
{
loader: 'thread-loader',
options: vueWorkerPool
},
{
loader: 'vue-loader'
}
]
},
{
oneOf: [
{
test: /\.s[ac]ss$/i,
use: [
'cache-loader',
// MiniCssExtractPlugin.loader,
// Creates `style` nodes from JS strings
"style-loader",
{
loader: 'thread-loader',
options: cssWorkerPool
},
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.js$/,
use: [
{
loader: 'cache-loader',
},
{
loader: 'thread-loader',
options: jsWorkerPool
},
{
loader: 'babel-loader'
}
],
exclude: resolve('node_modules'),
include: resolve('src')
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 10kb
}
},
generator: {
filename: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.tsx?$/,
exclude: resolve('node_modules'),
use: [
{
loader: 'babel-loader'
},
{
loader: "ts-loader",
options: { appendTsxSuffixTo: [/\.vue$/], transpileOnly: true }
}
]
},
]
}
]
},
node: {
global: true
},
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
}),
isExistDllFile && new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.join(__dirname, '../dist/vendors-manifest.json')
}),
new WebpackBar(),
]
}
Please remove cache-loader
, you don't need it, please use https://webpack.js.org/configuration/cache/
Please remove
cache-loader
, you don't need it, please use https://webpack.js.org/configuration/cache/
👌