123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- 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
- 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")
- },
- compress: true,
- port: 8080,
- open: true
- }
- };
|