122 lines
2.8 KiB
JavaScript
122 lines
2.8 KiB
JavaScript
const Webpack = require("webpack");
|
|
const Path = require("path");
|
|
const TerserPlugin = require("terser-webpack-plugin");
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|
const FileManagerPlugin = require("filemanager-webpack-plugin");
|
|
|
|
const opts = {
|
|
rootDir: process.cwd(),
|
|
devBuild: process.env.NODE_ENV !== "production"
|
|
};
|
|
|
|
module.exports = {
|
|
entry: {
|
|
app: "./src/js/app.js"
|
|
},
|
|
mode: process.env.NODE_ENV === "production" ? "production" : "development",
|
|
devtool:
|
|
process.env.NODE_ENV === "production" ? "source-map" : "inline-source-map",
|
|
output: {
|
|
path: Path.join(opts.rootDir, "dist"),
|
|
pathinfo: opts.devBuild,
|
|
filename: "js/[name].js",
|
|
chunkFilename: 'js/[name].js',
|
|
},
|
|
performance: { hints: false },
|
|
optimization: {
|
|
minimizer: [
|
|
new TerserPlugin({
|
|
parallel: true,
|
|
terserOptions: {
|
|
ecma: 5
|
|
}
|
|
}),
|
|
new CssMinimizerPlugin({})
|
|
],
|
|
runtimeChunk: false
|
|
},
|
|
plugins: [
|
|
// Extract css files to seperate bundle
|
|
new MiniCssExtractPlugin({
|
|
filename: "css/app.css",
|
|
chunkFilename: "css/app.css"
|
|
}),
|
|
// Copy fonts and images to dist
|
|
new CopyWebpackPlugin({
|
|
patterns: [
|
|
{ from: "src/fonts", to: "fonts" },
|
|
{ from: "src/img", to: "img" }
|
|
]
|
|
}),
|
|
// Copy dist folder to static
|
|
...(process.env.NODE_ENV === "production")? [
|
|
new FileManagerPlugin({
|
|
events: {
|
|
onEnd: {
|
|
copy: [
|
|
{ source: "./dist/", destination: "./static" }
|
|
]
|
|
}
|
|
},
|
|
})
|
|
] : [],
|
|
],
|
|
module: {
|
|
rules: [
|
|
// Babel-loader
|
|
{
|
|
test: /\.js$/,
|
|
exclude: /(node_modules)/,
|
|
use: {
|
|
loader: "babel-loader",
|
|
options: {
|
|
cacheDirectory: true
|
|
}
|
|
}
|
|
},
|
|
// Css-loader & sass-loader
|
|
{
|
|
test: /\.(sa|sc|c)ss$/,
|
|
use: [
|
|
MiniCssExtractPlugin.loader,
|
|
"css-loader",
|
|
"postcss-loader",
|
|
"sass-loader"
|
|
]
|
|
},
|
|
// Load fonts
|
|
{
|
|
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
|
type: "asset/resource",
|
|
generator: {
|
|
filename: "fonts/[name][ext]"
|
|
}
|
|
},
|
|
// Load images
|
|
{
|
|
test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/,
|
|
type: "asset/resource",
|
|
generator: {
|
|
filename: "img/[name][ext]"
|
|
}
|
|
},
|
|
]
|
|
},
|
|
resolve: {
|
|
extensions: [".js", ".scss"],
|
|
modules: ["node_modules"],
|
|
alias: {
|
|
request$: "xhr"
|
|
}
|
|
},
|
|
devServer: {
|
|
static: {
|
|
directory: Path.join(__dirname, "static")
|
|
},
|
|
port: 8080,
|
|
open: true
|
|
}
|
|
};
|