-
Notifications
You must be signed in to change notification settings - Fork 2
/
webpack.config.js
146 lines (138 loc) · 4.17 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
const path = require('path')
const fs = require('fs')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const StringReplacePlugin = require('string-replace-webpack-plugin')
const camelCaseLodash = require('lodash/camelCase')
const glob = require('glob')
const camelCase = (val) => {
let prefix = ''
if (val[0] === '$') {
prefix = '$'
}
return `${prefix}${camelCaseLodash(val)}`
}
const packageJson = JSON.parse(fs.readFileSync('./package.json'))
module.exports = {
entry: './src/index.js',
module: {
rules: [
// checks standard rules
{
enforce: 'pre',
test: /\.js$/,
loader: 'standard-loader',
exclude: /(node_modules)/
},
// loads assets files
{
test: /\.(png|jpg|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
exportAsEs6Default: true
}
}
},
// extracts .less to one .css file
{
test: /(\.css|index.less)$/,
use: ExtractTextPlugin.extract({
use: [
{loader: 'css-loader'},
{loader: 'postcss-loader'},
{loader: 'less-loader'}]
})
},
// injects @import statements in the index.less file
{
test: /index.less$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /\/\/@inject imports/ig,
replacement: function (match, p1, offset, string) { //eslint-disable-line
let imports = ''
glob.sync('src/**/*.less').forEach(function (fileName) {
fileName = fileName.replace(/^(src)\//, '')
imports += `@import "${fileName}";`
})
return imports
}
}
]
})
},
// generates index.js for containers and components
{
test: /index.js$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /\/\/ @inject imports/ig,
replacement: function (match, p1, offset, string) { //eslint-disable-line
let context = this.context
let contextFolder = path.relative(path.join(__dirname, 'src'), context)
let components = glob.sync(path.join(context, '*'))
.filter(source => {
// only folders with index.js file or .js file but not index.js
if (fs.lstatSync(source).isDirectory()) {
return path.relative(source, context) && fs.existsSync(path.join(source, 'index.js'))
}
return path.extname(source) === '.js' && path.basename(source) !== 'index.js'
})
.map(directory => path.relative(context, directory).replace('\\', '/').replace(/\.js+$/, ''))
let importStatements = components.reduce((res, c) => {
res += `import ${camelCase(path.basename(c))} from '${contextFolder}/${c}';`
return res
}, '')
return `${importStatements} export default {
${components.map(c => camelCase(path.basename(c))).join(',')} };`
}
}
]
})
}
]
},
resolve: {
modules: [
path.resolve(__dirname, './src'),
'node_modules'
]
},
context: __dirname,
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.ejs'),
title: packageJson.name,
module: packageJson.name
}),
new ExtractTextPlugin({filename: '[contenthash].styles.css'}),
new StringReplacePlugin()
],
devServer: {
contentBase: path.resolve(__dirname, '.tmp'),
historyApiFallback: true,
inline: true,
port: 3002
}
}