-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
132 lines (119 loc) · 3.88 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
126
127
128
129
130
131
132
const path = require('path')
const fs = require('fs-extra')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
/**
* Webpack can be passed a few environment variables to override the default
* files used to run this project. The environment variables are CUSTOM_CSS,
* HTML_FILE, YAML_CONFIG, and JS_CONFIG. They must each be passed in the
* format --env.*=/path/to/file. For example:
*
* yarn start --env.YAML_CONFIG=/absolute/path/to/config.yml
*/
module.exports = async env => {
// Gather the CSS, HTML, YAML, and JS override files.
const HTML_FILE = env && env.HTML_FILE || 'src/index.tpl.html'
//TODO new var configfile
const YAML_CONFIG = env && env.YAML_CONFIG || './config.yml'
// resolve the custom js file. If it is present, copy the file to a
// temporary folder within this project so that the file will be able to
// use the node_modules from this project
const def_themes_path = path.resolve(__dirname, `src/themes/`);
const THEMES_PATH = (env && env.THEMES_PATH && env.THEMES_PATH !== 'default') ? env.THEMES_PATH : def_themes_path;
const THEME = (env && env.THEME) ? env.THEME : 'default';
const THEME_PATH = path.join(THEMES_PATH, THEME, 'index.scss');
if(fs.existsSync(THEME_PATH) === false) {
console.warn(`Error theme path not exists: '${THEME_PATH}'`);
process.exit(1)
}
let customJsFile = './config.js';
if (env && env.JS_CONFIG) {
const splitPath = env.JS_CONFIG.split(path.sep)
customJsFile = `../tmp/${splitPath[splitPath.length - 1]}`
// copy location is relative to root, while js file for app is relative to src
await fs.copy(env.JS_CONFIG, `./tmp/${splitPath[splitPath.length - 1]}`)
}
return {
entry: [
'./src/main.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(yml|yaml)$/,
loader: ['json-loader', 'yaml-loader']
},
{
test: /\.(sc|c)ss$/,
use: [
'css-hot-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",
/*options: {
//TODO check if additionalData used
additionalData: (content, loaderContext) => {
return `$THEME: '${THEME}';`
}
}*/
}
],
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
THEME_PATH
}
},
output: {
auxiliaryComment: 'version',
path: path.join(__dirname, '/dist'),
publicPath: '',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: HTML_FILE,
inject: 'body',
filename: 'index.html'
}),
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
// Optionally override the default config files with some other
// files.
YAML_CONFIG: JSON.stringify(YAML_CONFIG),
JS_CONFIG: JSON.stringify(customJsFile)
})
],
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin({})
]
},
devServer: {
contentBase: './',
historyApiFallback: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}
}
}