91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
const path = require('path')
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
|
|
const TerserPlugin = require("terser-webpack-plugin")
|
|
|
|
let mode = 'development', target = 'web'
|
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
mode = 'development'
|
|
target = 'browserslist'
|
|
}
|
|
|
|
const plugins = [
|
|
new CleanWebpackPlugin(),
|
|
new MiniCssExtractPlugin(),
|
|
new HtmlWebpackPlugin({
|
|
template: './src/index.html',
|
|
inject: 'body'
|
|
}),
|
|
]
|
|
|
|
console.log( process.env.SOURCE_MAP_ENV )
|
|
|
|
module.exports = {
|
|
mode: mode,
|
|
target: target,
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.(jpe?g|png|gif|svg)$/i,
|
|
type: "asset",
|
|
},
|
|
{
|
|
test: /\.css$/i,
|
|
use: [
|
|
{
|
|
loader: MiniCssExtractPlugin.loader,
|
|
// This is required for asset imports in CSS, such as url()
|
|
options: { publicPath: '' },
|
|
},
|
|
'css-loader',
|
|
///"postcss-loader",
|
|
// according to the docs, sass-loader should be at the bottom, which
|
|
// loads it first to avoid prefixes in your sourcemaps and other issues.
|
|
//"sass-loader",
|
|
],
|
|
},
|
|
{
|
|
test: /\.js$/,
|
|
exclude: /node_modules/,
|
|
use: {
|
|
loader: 'babel-loader',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
entry: { app: './src/index' },
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: '[name].[hash].js',
|
|
},
|
|
plugins: plugins,
|
|
devtool: mode === 'production' ? 'source-map' : ( process.env.SOURCE_MAP_ENV ? 'source-map' : false ),
|
|
optimization: {
|
|
minimize: true,
|
|
minimizer: [
|
|
new TerserPlugin({
|
|
extractComments: true,
|
|
terserOptions: {
|
|
ecma: 5,
|
|
compress: {
|
|
drop_console: mode === 'production',
|
|
},
|
|
},
|
|
}),
|
|
|
|
],
|
|
},
|
|
devServer: {
|
|
static: path.resolve(__dirname, 'dist'),
|
|
compress: true,
|
|
port: 1976,
|
|
liveReload: true,
|
|
/*overlay: {
|
|
warnings: true,
|
|
errors: true,
|
|
}*/
|
|
|
|
},
|
|
} |