| 1 |
const path = require("path"); |
| 2 |
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); |
| 3 |
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); |
| 4 |
const TerserPlugin = require("terser-webpack-plugin"); |
| 5 |
const { VueLoaderPlugin } = require("vue-loader"); |
| 6 |
const webpack = require("webpack"); |
| 7 |
|
| 8 |
module.exports = { |
| 9 |
entry: `./vue-frontend/src/main.ts`, |
| 10 |
output: { |
| 11 |
path: path.resolve(__dirname, "./vue-frontend/dist/"), |
| 12 |
filename: "[name].js", |
| 13 |
}, |
| 14 |
module: { |
| 15 |
rules: [ |
| 16 |
{ |
| 17 |
test: /\.vue$/, |
| 18 |
loader: "vue-loader", |
| 19 |
options: { |
| 20 |
compilerOptions: { |
| 21 |
isCustomElement: (tag) => tag.startsWith("hp-"), |
| 22 |
}, |
| 23 |
}, |
| 24 |
}, |
| 25 |
{ |
| 26 |
test: /\.ts$/, |
| 27 |
loader: "ts-loader", |
| 28 |
options: { |
| 29 |
appendTsSuffixTo: [/\.vue$/], |
| 30 |
transpileOnly: true, |
| 31 |
configFile: path.resolve(__dirname, 'vue-frontend/tsconfig.json') |
| 32 |
}, |
| 33 |
exclude: /node_modules/, |
| 34 |
}, |
| 35 |
{ |
| 36 |
test: /\.s?[c]ss$/i, |
| 37 |
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], |
| 38 |
}, |
| 39 |
{ |
| 40 |
test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)$/i, |
| 41 |
use: "url-loader?limit=2048", |
| 42 |
}, |
| 43 |
], |
| 44 |
}, |
| 45 |
optimization: { |
| 46 |
minimizer: [ |
| 47 |
new CssMinimizerPlugin(), |
| 48 |
new TerserPlugin({ |
| 49 |
terserOptions: { |
| 50 |
compress: { |
| 51 |
drop_console: true, |
| 52 |
}, |
| 53 |
}, |
| 54 |
}), |
| 55 |
], |
| 56 |
}, |
| 57 |
plugins: [ |
| 58 |
new VueLoaderPlugin(), |
| 59 |
new MiniCssExtractPlugin({ |
| 60 |
filename: "[name].css", |
| 61 |
}), |
| 62 |
// new webpack.HotModuleReplacementPlugin(), |
| 63 |
new webpack.DefinePlugin({ |
| 64 |
__VUE_OPTIONS_API__: true, |
| 65 |
__VUE_PROD_DEVTOOLS__: false, |
| 66 |
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, |
| 67 |
}), |
| 68 |
], |
| 69 |
resolve: { |
| 70 |
extensions: [".ts", ".tsx", ".js", ".vue"], |
| 71 |
alias: { |
| 72 |
"@": path.resolve(__dirname, "vue-frontend/src/"), |
| 73 |
"@vue-frontend": path.resolve(__dirname, "vue-frontend/"), |
| 74 |
}, |
| 75 |
fallback: { |
| 76 |
punycode: require.resolve("punycode/"), |
| 77 |
}, |
| 78 |
}, |
| 79 |
}; |
| 80 |
|
