web_pack_config

This commit is contained in:
2021-09-02 01:51:37 +09:00
parent b11aa4e633
commit a532e73b52
3 changed files with 159 additions and 45 deletions
+2
View File
@@ -33,8 +33,10 @@ d_pic/*.png
d_pic/*.webp
d_pic/uploaded_image
*/dist_misc/*
*/dist_js/*
*/dist_css/*
/dist_misc/*
/dist_js/*
/dist_css/*
+3
View File
@@ -29,6 +29,7 @@
"core-js": "^3.16.3",
"date-fns": "^2.23.0",
"downloadjs": "^1.4.7",
"file-loader": "^6.2.0",
"jquery": "^3.6.0",
"js-sha512": "^0.8.0",
"linkifyjs": "^2.1",
@@ -36,6 +37,7 @@
"query-string": "^7.0.1",
"select2": "^4.0",
"summernote": "^0.8.18",
"url-loader": "^4.1.1",
"vue": "^3.2.2"
},
"devDependencies": {
@@ -62,6 +64,7 @@
"ts-loader": "^9.2.5",
"typescript": "^4.4.2",
"vue-loader": "^16.5.0",
"vue-style-loader": "^4.1.3",
"webpack": "^5.51.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.8.0"
+154 -45
View File
@@ -5,8 +5,151 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
const { resolve } = require('path');
module.exports = (env, argv) => {
const target = env.target??'hwe';
const target = env.target ?? 'hwe';
const mode = argv.mode ?? 'production';
const ingame_vue = {
name: 'ingame_vue',
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".vue"],
alias: {
vue: "@vue/runtime-dom"
}
},
mode,
entry: {
//v_test: resolve(__dirname, `${target}/ts/v_test.ts`)
},
output: {
filename: '[name].js',
path: resolve(__dirname, `${target}/dist_js`)
},
devtool: 'source-map',
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors_vue',
chunks: 'all',
},
},
}
},
module: {
rules: [
//FROM `vue inspect` and some tweaks
{
test: /\.(ts|tsx)$/,
exclude: /(node_modules)/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
transpileOnly: true,
appendTsSuffixTo: [
'\\.vue$'
],
happyPackMode: false
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /(node_modules)/,
options: {
/*transformAssetUrls: {
png: [],
},*/
hotReload: false,
}
},
{
test: /\.vue\.(s?[ac]ss)$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /(?<!\.vue)\.(s?[ac]ss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif|webp)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: '../dist_misc/[name].[contenthash:8].[ext]'
}
}
}
}
]
},
{
test: /\.(svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '../dist_misc/[name].[contenthash:8].[ext]'
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: '../dist_misc/[name].[contenthash:8].[ext]'
}
}
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: '../dist_misc/[name].[contenthash:8].[ext]'
}
}
}
}
]
},
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '../dist_css/[name].css'
}),
//new BundleAnalyzerPlugin()
],
cache: {
type: 'filesystem',
allowCollectingMemory: true,
},
};
const ingame = {
name: 'ingame',
resolve: {
@@ -77,29 +220,13 @@ module.exports = (env, argv) => {
]
}
}, 'ts-loader']
}, {
test: /\.vue$/i,
exclude: /(node_modules)/,
use: [
'vue-loader'
]
}, {
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
],
}, {
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /.(s?[ac]ss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '../dist_css/[name].css'
}),
@@ -162,30 +289,12 @@ module.exports = (env, argv) => {
]
}
}
},
{
test: /\.vue$/i,
exclude: /(node_modules)/,
use: [
{ loader: 'vue-loader' }
]
}, {
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
],
}, {
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
test: /.(s?[ac]ss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '../dist_css/[name].css'
}),
@@ -197,10 +306,10 @@ module.exports = (env, argv) => {
},
};
if(target == 'hwe'){
return [ingame, gateway];
if (target == 'hwe') {
return [ingame_vue, ingame, gateway];
}
else{
return [ingame];
else {
return [ingame_vue, ingame];
}
}