-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
96 lines (92 loc) · 2.93 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// webpack.config.
const path = require('path');
const { HotModuleReplacementPlugin } = require('webpack');
const PnpWebpackPlugin = require(`pnp-webpack-plugin`);
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlTemplatePlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DotEnvPlugin = require('dotenv-webpack');
const NODE_ENV = process.env.NODE_ENV || 'development';
const isDev = /^development$/i.test(NODE_ENV);
const APP_DIR = path.resolve(__dirname);
const DIST_DIR =path.resolve(__dirname, 'dist');
const ASSETS_DIR =path.resolve(__dirname, 'assets');
const ENTRY_PATH = path.resolve(APP_DIR, 'src/client/index.ts');
const INDEX_PATH = path.resolve(APP_DIR, 'src/client/index.html');
module.exports = {
mode: process.env.NODE_ENV || 'development',
entry: ENTRY_PATH,
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
plugins: [PnpWebpackPlugin],
extensions: [ '*', '.js','.ts', '.vue', '.json' ],
},
resolveLoader: {
plugins: [PnpWebpackPlugin.moduleLoader(module)]
},
plugins: [
new DotEnvPlugin({
systemvars: true
}),
new HtmlTemplatePlugin({
template: INDEX_PATH
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[hash].css"
}),
new HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.vue$/i,
include: APP_DIR,
loader: require.resolve('vue-loader')
},
{
test: /\.ts$/,
include: APP_DIR,
loader: require.resolve('ts-loader'),
options: PnpWebpackPlugin.tsLoaderOptions({ transpileOnly: true})
},
{
test: /\.js$/,
include: APP_DIR,
loader: require.resolve('babel-loader')
},
{
test: /\.(s*)[a|c]ss$/,
use: [
require.resolve("vue-style-loader"),
MiniCssExtractPlugin.loader,
require.resolve("css-loader"),
require.resolve("sass-loader")
]
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: require.resolve('file-loader'),
options: {
publicPath: 'assets',
name(resourcePath, resourceQuery) {
return isDev ?
'[path][name].[ext]' :
'[contenthash].[ext]'
},
},
},
]
},
devServer: {
contentBase: [DIST_DIR, ASSETS_DIR],
hot: true,
port: 9000
},
output: {
filename: '[name].[hash].js',
path: DIST_DIR,
}
};