web_Developer_Victor
@web_Developer_Victor
Что такое google?

Почему webpack не работает?

Привет, уже пару дней не могу разобраться в чем причина того, что мой webpack не работает.
В Webpack'е начал разбираться не давно, поэтому могут бить грубые ошибки. Помогите, пожалуйста. Если нужно еще что-то скинуть — уточните))

Webpack
"use strict";

// Standart settings
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");
const path = require("path");

// Additional plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackImagesResizer = require('webpack-images-resizer');
const SvgStore = require("webpack-svgstore-plugin");
const ImageminWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PATHS = {
    src: path.join(__dirname, './src'),
    dist: path.join(__dirname, './dist'),
    assets: './'
}

// webpack
const conf = module.exports = {
    // externals: {
    //     paths: PATHS
    // },

    entry: {
        script: path.join(PATHS.src, "/js/script.js"),
    },

    output: {
        filename: path.join(PATHS.assets, "js/[name].js"),
        path: path.join(PATHS.dist, '/js/'),
        publicPath: '/'
    },
    
    // watch settings
    mode: NODE_ENV,

    devtool: NODE_ENV == "development" ? "eval" : false,
    devServer: {
        contentBase: PATHS.dist,
        port: 8080,
        open: NODE_ENV == "development" ? true : false,
        overlay: {
            warnings: true,
            errors: true
        }
    },
    
    watchOptions: {
        aggregateTimeout: 100
    },

    module: {
        rules: [{
            test: /\.js$/,
            loader: "babel-loader",
            exclude: "/node_modules/",
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: "> 3%"
                        }
                    }]
                ]
            }
        }, {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]'
            }
        }, {
            test: /\.scss$/,
            use: [
                "style-loader",
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader",
                "csscomb-loader",
                "sass-loader"
            ]
        }]
    },

    plugins: [
        new HtmlWebpackPlugin({
            // favicon: "dist/img/favicon.ico",
            // minify: true,
            hash: false,
            template: 'src/index.html',
            filename: "./index.html" 
        }),
        new SvgStore({
            svgoOptions: {
                plugins: [{
                    removeTitle: true
                }]
            },
            prefix: 'icon'
        }),
        new WebpackImagesResizer({
            src: path.join(PATHS.src, '/img'),
            dest: path.join(PATHS.dist, '/img')
        }, {
            width: "200%"
        }),
        new ImageminWebpWebpackPlugin({
            config: [{
                test: /\.(jpe?g|png)/,
                options: {
                    quality: 90
                }
            }],
            overrideExtension: true,
            detailedLogs: false,
            strict: true
        }),
        new MiniCssExtractPlugin({
            filename: path.join(PATHS.assets, "css/[name].css")
        }),
        new CopyWebpackPlugin([{
            from: path.join(PATHS.src, '/img'),
            to: path.join(PATHS.assets, "img")
        }])
    ]

};

if (NODE_ENV == "production") {
    module.exports.optimization.minimizer[
        new UglifyJsPlugin({
            uglifyOptions: {
                warnings: false,
            }
        })
    ]
}

  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
web_Developer_Victor
@web_Developer_Victor Автор вопроса
Что такое google?
Спасибі Артём Петренков. На самом деле ошибка крайне банальная. Вместо 'webpack ...' в package.json было прописано 'webpack-dev-server ...' Поэтому и ничего не работало
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы