未启用CSS Modules的情况下在// 引入 path 模块
const path = require('path')
// 判断当前环境是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 样式单独分离到一个文件中
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 官方文档：Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用
const VueLoaderPlugin = require("vue-loader/lib/plugin");
// 引入静态资源复制插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
// 引入入口文件
const { entry } = require('./setting.js')
const webpack = require("webpack")
module.exports = {
// 打包入口地址
entry: entry,
// 模块resolve的规则
resolve: {
//自动的扩展后缀，比如一个js文件，则引用时书写可不要写.js
extensions: ['.js', '.json', '.css', '.less', '.vue','.jsx'],
// 路径别名
alias: {
'@': path.resolve(__dirname, '../src'),
'vue$': 'vue/dist/vue.esm.js',
"@ht-form-create/element-ui": path.resolve(__dirname, "../src/libs/form-create/packages/element-ui/src"),
"@ht-form-create/utils": path.resolve(__dirname, "../src/libs/form-create/packages/utils"),
"@ht-form-create/designer": path.resolve(__dirname, "../src/libs/form-designer/src")
},
fallback: {
process: require.resolve("process/browser")
}
},
// context 是 webpack entry 的上下文，是入口文件所处的目录的绝对路径，默认情况下是当前根目录。
// 由于我们 webpack 配置文件放于 build 目录下，所以需要重新设置下 context ，使其指向根目录。
context: path.resolve(__dirname, '../'),
// 构建目标
target: ['web', 'es5'],
// 不同类型模块的处理规则
module: {
rules: [
{
oneOf: [
// 处理 css、less 文件
{
test: /\.css$/i,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
// 是否使用source-map
sourceMap: !isProduction,
esModule: false
}
},
{
loader: 'postcss-loader',
options: {
// 是否使用source-map
sourceMap: !isProduction
}
}
]
},
{
test: /\.less$/i,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
// 是否使用source-map
sourceMap: !isProduction,
esModule: false
}
},
{
loader: 'postcss-loader',
options: {
// 是否使用source-map
sourceMap: !isProduction
}
},
'less-loader'
]
},
// 处理sass资源
{
test: /\.s[ca]ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
// 解析 html 中的 src 路径
// {
// test: /\.html$/,
// use: 'html-loader'
// },
// 对图片资源文件进行处理，webpack5已经废弃了url-loader，改为type
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
type: 'asset',
exclude: [path.resolve(__dirname, 'src/assets/imgs')],
generator: {
filename: 'imgs/[name].[contenthash][ext]'
}
},
// 对字体资源文件进行处理，webpack5已经废弃了url-loader，改为type
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
type: 'asset',
generator: {
filename: 'fonts/[name].[contenthash][ext]'
}
},
// 对音频资源文件进行处理，webpack5已经废弃了url-loader，改为type
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
type: 'asset',
exclude: [path.resolve(__dirname, 'src/assets/medias')],
generator: {
filename: 'medias/[name].[contenthash][ext]'
}
},
{
test: /\.(m|j)s$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
},
{
loader: "thread-loader", // 开启多进程
options: {
workers: threads, // 数量
},
}
]
},
{
test: /\.(js|jsx)$/,
include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../src/libs/form-create"), path.resolve(__dirname, "../src/libs/form-designer")],
use: [
{
loader: "babel-loader",
options: {
cacheDirectory: true,
// 确保包含处理JSX的预设
presets: ["@babel/preset-env", "@vue/babel-preset-jsx"]
}
},
{
loader: "thread-loader",
options: { workers: threads }
}
]
}
]
},
// 处理.vue文件
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
watchOptions: {
ignored: /node_modules/,
},
// 插件
plugins: [
new VueLoaderPlugin(),
// 把public的一些静态文件复制到指定位置，排除 html 文件
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, '../public'),
globOptions: {
dot: true,
gitignore: true
}
}
]
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || "development")
// 可根据需要添加其他环境变量
// API_URL: JSON.stringify('https://api.example.com')
}
})
]
}
怎么添加
最新发布
本文介绍如何在Node.js中使用__dirname变量获取当前模块文件的完整绝对路径，并通过示例展示了如何在应用程序中引用和打印模块文件的路径。
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
