197 lines
4.9 KiB
JavaScript
197 lines
4.9 KiB
JavaScript
'use strict'
|
|
const path = require('path')
|
|
const utils = require('./utils')
|
|
const config = require('../config')
|
|
const webpack = require('webpack')
|
|
const { VueLoaderPlugin } = require('vue-loader')
|
|
const vueLoaderConfig = require('./vue-loader.conf')
|
|
const { loader} = require('mini-css-extract-plugin')
|
|
const ESLintPlugin = require('eslint-webpack-plugin');
|
|
|
|
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,
|
|
clean: true // 替代 CleanWebpackPlugin
|
|
},
|
|
resolve: {
|
|
extensions: ['.js', '.vue', '.json'],
|
|
alias: {
|
|
'@': resolve('src'),
|
|
'vue$': 'vue/dist/vue.esm.js'
|
|
},
|
|
fallback: {
|
|
"process": require.resolve("process/browser.js"),
|
|
"path": require.resolve("path-browserify"),
|
|
"crypto": require.resolve("crypto-browserify"),
|
|
"stream": require.resolve("stream-browserify"),
|
|
"buffer": require.resolve("buffer"),
|
|
"util": require.resolve("util"),
|
|
"url": require.resolve("url/"),
|
|
"fs": false,
|
|
"tls": false,
|
|
"net": false,
|
|
"http": false,
|
|
"https": false,
|
|
"zlib": false
|
|
}
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.vue$/,
|
|
loader: 'vue-loader',
|
|
options: vueLoaderConfig
|
|
},
|
|
{
|
|
test: /\.js$/,
|
|
loader: 'babel-loader',
|
|
exclude: /node_modules/,
|
|
include: [
|
|
resolve('src'),
|
|
resolve('test'),
|
|
resolve('node_modules/webpack-dev-server/client')
|
|
]
|
|
},
|
|
{
|
|
test: /\.svg$/,
|
|
loader: 'svg-sprite-loader',
|
|
include: [resolve('src/icons')],
|
|
options: {
|
|
symbolId: 'icon-[name]'
|
|
}
|
|
},
|
|
{
|
|
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
|
|
type: 'asset',
|
|
parser: {
|
|
dataUrlCondition: {
|
|
maxSize: 10 * 1024 // 10kb
|
|
}
|
|
},
|
|
generator: {
|
|
filename: utils.assetsPath('img/[name].[hash:8][ext]')
|
|
},
|
|
exclude: [resolve('src/icons')]
|
|
},
|
|
{
|
|
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
|
type: 'asset',
|
|
parser: {
|
|
dataUrlCondition: {
|
|
maxSize: 10 * 1024
|
|
}
|
|
},
|
|
generator: {
|
|
filename: utils.assetsPath('media/[name].[hash:8][ext]')
|
|
}
|
|
},
|
|
{
|
|
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
|
type: 'asset',
|
|
parser: {
|
|
dataUrlCondition: {
|
|
maxSize: 10 * 1024
|
|
}
|
|
},
|
|
generator: {
|
|
filename: utils.assetsPath('fonts/[name].[hash:8][ext]')
|
|
}
|
|
},
|
|
// 添加 CSS 文件处理规则
|
|
{
|
|
test: /\.css$/,
|
|
use: [
|
|
process.env.NODE_ENV === 'production'
|
|
? loader
|
|
: 'vue-style-loader',
|
|
'css-loader'
|
|
],
|
|
include: /node_modules/ // 专门处理 node_modules 中的 CSS
|
|
},
|
|
{
|
|
test: /\.css$/,
|
|
use: [
|
|
process.env.NODE_ENV === 'production'
|
|
? loader
|
|
: 'vue-style-loader',
|
|
'css-loader'
|
|
],
|
|
exclude: /node_modules/ // 处理项目中的 CSS
|
|
},
|
|
// SCSS 规则
|
|
{
|
|
test: /\.scss$/,
|
|
use: [
|
|
process.env.NODE_ENV === 'production'
|
|
? loader
|
|
: 'vue-style-loader',
|
|
'css-loader',
|
|
{
|
|
loader: 'sass-loader',
|
|
options: {
|
|
// 使用现代 API
|
|
api: 'modern',
|
|
// 或者使用兼容模式
|
|
// api: 'legacy',
|
|
sassOptions: {
|
|
// 其他 Sass 选项
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
test: /\.sass$/,
|
|
use: [
|
|
process.env.NODE_ENV === 'production'
|
|
? loader
|
|
: 'vue-style-loader',
|
|
'css-loader',
|
|
{
|
|
loader: 'sass-loader',
|
|
options: {
|
|
sassOptions: {
|
|
indentedSyntax: true
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
plugins: [
|
|
new VueLoaderPlugin(),
|
|
new webpack.ProvidePlugin({
|
|
process: 'process/browser.js',
|
|
Buffer: ['buffer', 'Buffer']
|
|
}),
|
|
new ESLintPlugin({
|
|
extensions: ['js', 'vue'],
|
|
exclude: ['node_modules', 'dist', 'build', 'assets/img/api'],
|
|
// 只检查当前修改的文件,不检查整个项目
|
|
lintDirtyModulesOnly: true,
|
|
threads: true, // 启用多线程,提升速度
|
|
fix: false,
|
|
emitWarning: true,
|
|
emitError: false,
|
|
failOnWarning: false,
|
|
failOnError: false,
|
|
// 缓存 ESLint 结果
|
|
cache: true,
|
|
cacheLocation: 'node_modules/.cache/eslint'
|
|
})
|
|
]
|
|
}
|