const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
function resolve (dir) {
return path.resolve(__dirname, '..', dir)
}
module.exports = {
mode: process.env.NODE_ENV,
entry: {
app: resolve('src/app')
},
output: {
filename: '[name].js',
path: resolve('dist'),
publicPath: '/'
},
resolve: {
alias: {
'@': resolve('src')
},
extensions: ['.js', '.styl']
},
module: {
rules: [
{
test: /\.styl(us)?$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
sourceMap: true
},
{
loader: 'postcss-loader',
sourceMap: true
},
{
loader: 'stylus-loader',
sourceMap: true
}
]
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')]
},
{
test: /\.(png|jpg(e)?|gif|svg)/,
loader: 'url-loader',
options: {
limit: 8190
}
}
]
},
plugins: [
new HtmlPlugin({
template: resolve('index.html'),
title: 'index',
favicon: resolve('src/assets/img/logo.png')
}),
new webpack.DefinedPlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new MiniCssExtractPlugin(),
new webpack.HotModuleReplacementPlugin()
],
optimization: {
minimize: true || false,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 3,
maxInitialRequests: 5,
cacheGroups: {
verson: {
test: /[\\/]node_modules[\\/]/,
priority: 10
}
}
}
},
devServer: {
hot: true,
host: '0.0.0.0',
// open: true,
useLocalIp: true,
clientLogLevel: 'warning',
overlay: {
warnings: true,
error: true
},
inline: true,
progress: true,
// onInfo: true,
// quiet: true
}
}