2018-11-26 01:51:26 -05:00
|
|
|
const path = require('path')
|
|
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
2018-11-26 22:53:07 -05:00
|
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
2018-11-26 23:26:23 -05:00
|
|
|
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
|
|
|
|
const TerserPlugin = require('terser-webpack-plugin')
|
2018-11-26 22:53:07 -05:00
|
|
|
|
|
|
|
const mode = process.env.NODE_ENV || 'development'
|
2018-11-26 01:51:26 -05:00
|
|
|
|
|
|
|
module.exports = {
|
2018-11-26 23:26:23 -05:00
|
|
|
optimization: {
|
|
|
|
minimizer: [
|
|
|
|
new TerserPlugin({
|
|
|
|
cache: true,
|
|
|
|
extractComments: true,
|
|
|
|
parallel: true,
|
|
|
|
sourceMap: true
|
|
|
|
}),
|
|
|
|
new OptimizeCSSAssetsPlugin({})
|
|
|
|
]
|
|
|
|
},
|
2018-11-26 22:24:31 -05:00
|
|
|
entry: [
|
|
|
|
'core-js/fn/array/from',
|
|
|
|
'core-js/fn/array/includes',
|
|
|
|
'./src/app.js'
|
|
|
|
],
|
2018-11-26 22:53:07 -05:00
|
|
|
mode: mode,
|
2018-11-26 01:51:26 -05:00
|
|
|
output: {
|
|
|
|
filename: '[name].[contenthash].js',
|
|
|
|
path: path.resolve(__dirname, 'dist')
|
|
|
|
},
|
|
|
|
plugins: [
|
|
|
|
new HtmlWebpackPlugin({
|
2020-06-14 01:22:35 -04:00
|
|
|
template: 'src/index.ejs',
|
2018-11-26 23:26:23 -05:00
|
|
|
minify: mode === 'production' ? {
|
|
|
|
collapseWhitespace: true,
|
|
|
|
removeComments: true,
|
|
|
|
removeRedundantAttributes: true,
|
|
|
|
removeScriptTypeAttributes: true,
|
|
|
|
removeStyleLinkTypeAttributes: true,
|
|
|
|
useShortDoctype: true
|
|
|
|
} : false
|
2018-11-26 22:53:07 -05:00
|
|
|
}),
|
|
|
|
new MiniCssExtractPlugin({
|
|
|
|
filename: '[name].[contenthash].css'
|
2018-11-26 01:51:26 -05:00
|
|
|
})
|
|
|
|
],
|
|
|
|
module: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
test: /\.(scss)$/,
|
|
|
|
use: [
|
|
|
|
{
|
2020-06-14 00:48:15 -04:00
|
|
|
loader: mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'
|
2018-11-26 01:51:26 -05:00
|
|
|
},
|
|
|
|
{
|
|
|
|
// Interprets `@import` and `url()` like `import/require()` and will resolve them
|
|
|
|
loader: 'css-loader'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
// Loader for webpack to process CSS with PostCSS
|
|
|
|
loader: 'postcss-loader',
|
|
|
|
options: {
|
|
|
|
plugins: function () {
|
|
|
|
return [
|
|
|
|
require('autoprefixer')
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
// Loads a SASS/SCSS file and compiles it to CSS
|
|
|
|
loader: 'sass-loader'
|
|
|
|
}
|
|
|
|
]
|
2018-12-04 22:18:09 -05:00
|
|
|
},
|
|
|
|
{
|
|
|
|
test: /\.(png|jp(e*)g|svg)$/,
|
|
|
|
use: [{
|
|
|
|
loader: 'file-loader',
|
|
|
|
options: {
|
|
|
|
limit: 8000, // Convert images < 8kb to base64 strings
|
|
|
|
name: '[name].[hash].[ext]'
|
|
|
|
}
|
|
|
|
}]
|
2018-11-26 01:51:26 -05:00
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|