forked from ghiscoding/slickgrid-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
125 lines (122 loc) · 3.78 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { HotModuleReplacementPlugin, ProvidePlugin } = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// primary config:
const title = 'React Navigation Skeleton';
const outDevDir = path.resolve(__dirname, 'dist');
const outProdDir = path.resolve(__dirname, 'docs');
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '';
module.exports = ({ production } = {}, { server } = {}) => ({
resolve: {
extensions: ['.ts', '.tsx', '.js'],
modules: [srcDir, 'node_modules'],
alias: {
'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
moment$: 'moment/moment.js'
},
fallback: {
http: false,
https: false,
stream: false,
util: false,
zlib: false,
}
},
entry: {
app: [`${srcDir}/index`],
vendor: ['jquery']
},
mode: production ? 'production' : 'development',
output: {
path: production ? outProdDir : outDevDir,
publicPath: baseUrl,
filename: '[name].[contenthash].bundle.js',
sourceMapFilename: '[name].[contenthash].bundle.js.map',
chunkFilename: '[name].[contenthash].chunk.js',
},
stats: {
warnings: false
},
target: 'web',
performance: { hints: false },
devServer: {
static: {
directory: production ? outProdDir : outDevDir,
},
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
compress: true,
hot: false,
liveReload: true,
port: 8080,
host: 'localhost',
open: true,
},
devtool: production ? false : 'eval-cheap-module-source-map',
module: {
rules: [
{
test: /\.css$/i,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader']
},
{
test: /\.(ts|js)x?$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
["@babel/preset-env",
{
"targets": {
"browsers": [">0.03%"]
},
"useBuiltIns": "entry",
"corejs": 3
}
],
"@babel/preset-typescript",
"@babel/preset-react"
]
},
},
},
{ test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'], issuer: /\.[tj]sx?$/i },
{ test: /\.(sass|scss)$/, use: ['css-loader', 'sass-loader'], issuer: /\.html?$/i },
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.ts?$/, use: 'ts-loader', exclude: nodeModulesDir, },
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', },
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, type: 'asset/resource', },
]
},
plugins: [
new ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
}),
// ref: https://webpack.js.org/plugins/mini-css-extract-plugin/
new MiniCssExtractPlugin({ // updated to match the naming conventions for the js files
filename: '[name].[contenthash].bundle.css',
chunkFilename: '[name].[contenthash].chunk.css'
}),
new CopyWebpackPlugin({
patterns: [
{ from: `${srcDir}/assets`, to: 'assets' }
]
}),
// Note that the usage of following plugin cleans the webpack output directory before build.
new CleanWebpackPlugin(),
new HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
favicon: './src/favicon.ico',
template: './src/index.html'
})
]
});