153 lines
3.5 KiB
JavaScript
153 lines
3.5 KiB
JavaScript
const os = require('os')
|
|
const path = require('path')
|
|
const glob = require('glob')
|
|
|
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
|
|
const svgToMiniDataURI = require('mini-svg-data-uri')
|
|
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
|
|
const CSSMQPackerPlugin = require('css-mqpacker-webpack-plugin')
|
|
|
|
let mode = 'development', target = 'web', isProd = false
|
|
const babelExclude = /(node_modules|bower_components)/
|
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
mode = 'development'
|
|
target = 'browserslist'
|
|
isProd = true
|
|
}
|
|
|
|
const isDev = process.env.NODE_ENV !== 'production'
|
|
|
|
const plugins = [
|
|
new CleanWebpackPlugin(),
|
|
new MiniCssExtractPlugin({
|
|
filename: '[name].[hash].css'
|
|
}),
|
|
new PurgeCSSPlugin({
|
|
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
|
|
//only: ['bundle', 'vendor']
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: './src/index.html',
|
|
inject: 'body',
|
|
}),
|
|
]
|
|
|
|
const stylesLoaders = loader => {
|
|
const loaders = [
|
|
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
|
|
'css-loader',
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
postcssOptions: {
|
|
ident: 'postcss',
|
|
plugins: [
|
|
require('postcss-preset-env'),
|
|
],
|
|
},
|
|
},
|
|
},
|
|
]
|
|
|
|
console.log(loaders)
|
|
|
|
if (loader) {
|
|
loaders.push(loader)
|
|
}
|
|
|
|
return loaders
|
|
}
|
|
|
|
module.exports = {
|
|
mode: mode,
|
|
target: target,
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.css$/i,
|
|
use: stylesLoaders(),
|
|
},
|
|
{
|
|
test: /\.s[ac]ss$/i,
|
|
use: stylesLoaders('sass-loader'),
|
|
},
|
|
{
|
|
test: /\.m?js$/i,
|
|
exclude: babelExclude,
|
|
use: {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: [
|
|
'@babel/preset-env',
|
|
],
|
|
plugins: [
|
|
'@babel/plugin-proposal-class-properties',
|
|
],
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.(jpe?g|webp|png|gif|svg)$/i,
|
|
type: 'asset/resource',
|
|
},
|
|
{
|
|
test: /\.(svg)$/i,
|
|
type: 'asset/inline',
|
|
generator: {
|
|
dataUrl: content => {
|
|
content = content.toString()
|
|
return svgToMiniDataURI(content)
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
//
|
|
entry: { faker: './src/faker', app: './src/index' },
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: '[name].[hash].js',
|
|
},
|
|
plugins: plugins,
|
|
devtool: mode !== 'production' ? (process.env.SOURCE_MAP_ENV ? 'eval-cheap-module-source-map' : false) : false,
|
|
// devtool: 'source-map',
|
|
optimization: {
|
|
minimize: isProd,
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
},
|
|
minimizer: [
|
|
`...`,
|
|
new CssMinimizerPlugin({
|
|
parallel: os.cpus().length,
|
|
minimizerOptions: {
|
|
preset: [
|
|
'default', // for advanced need to run `npm i -D cssnano-preset-advanced`
|
|
{
|
|
discardComments: { removeAll: true },
|
|
},
|
|
],
|
|
},
|
|
}),
|
|
new CSSMQPackerPlugin({
|
|
test: /\.css$/i,
|
|
sort: true,
|
|
}),
|
|
],
|
|
},
|
|
devServer: {
|
|
static: path.resolve(__dirname, 'dist'),
|
|
compress: true,
|
|
port: 1976,
|
|
//disableHostCheck: true,
|
|
allowedHosts: [
|
|
'dev.amok.space',
|
|
],
|
|
liveReload: true,
|
|
historyApiFallback: true,
|
|
},
|
|
} |