webpack - ошибки в сборке - Переменная среды NODE_ENV-production webpack не определена

103
07 мая 2021, 01:30

Какие моменты кода отвечают за ошибки, что нужно исправить:

Первая ошибка при запуске npm run production:

Переменная среды NODE_ENV-production webpack не определена

Вторая ошибка происходит в следующем: браузер не видит картинку, подключённую через свойство background , но подключенную напрямую через img видит. Как я поняла, там почему-то не тот путь указывается, то есть когда через img - он ищет изображение в нужной папке img, а когда через background , то ищет почему-то в папке css , но что-то я не соображаю как это изменить...

И, собственно, package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "webpack module sample",
  "main": "src/js/app.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "production": "set NODE_ENV-production webpack"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "autoprefix": "^1.0.1",
    "autoprefixer": "^9.6.1",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "cross-env": "^5.2.0",
    "css-loader": "^3.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "img-loader": "^3.0.1",
    "node-sass": "^4.12.0",
    "postcss-cli": "^6.1.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "svg-url-loader": "^3.0.0",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

webpack.config.js


const path = require('path'); 
const webpack = require('webpack'); 

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var isProduction = (process.env.NODE_ENV === 'production');

module.exports = {
       context: path.resolve(__dirname, 'src'),

    entry: {
        app: [
            './js/app.js',
            './scss/style.scss'
        ],
    },

    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),                
    }, 
    // devServer configuration 
    devServer: {
        contentBase: './app'
    },
    devtool: (isProduction) ? '' : 'inline-source-map',
    module: {
        rules: [
            //scss
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader:'css-loader',
                            options: { sourceMap: true}
                        },
                        {
                            loader:'postcss-loader',
                            options: { sourceMap: true}
                        },
                        {
                            loader:'sass-loader',
                            options: { sourceMap: true}
                        },
                    ],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(png|gif|jpe?g)$/,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                        },
                    },
                    'img-loader',
                ]
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin(
            './css/[name].css'
        ),
        new CleanWebpackPlugin (),
        new CopyWebpackPlugin (
            [
                { from: './img', to: 'img'}
            ],
            {
                ignore: [
                    {glob:'svg/*'},
                ]
            }
        ),
    ],
}
if (isProduction) {
    module.exports.plugins.push (
        new UglifyJSPlugin( {
            sourceMap: true
        }),
    );
    module.exports.plugins.push (
        new ImageminPlugin({
            test: /\.(png|jpe?g|gif|svg)$/
        }),
    );
    module.exports.plugins.push (
        new webpack.LoaderOptionsPlugin({
            minimize: true 
        }),
    );
}

ну и ещё есть postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

В общем вот, я точно уже знаю, что исправлять.

READ ALSO
Использование html и xsl тэгов в xsl-преобразовании

Использование html и xsl тэгов в xsl-преобразовании

Я использую xsl-translations в своем проекте для создания таблиц и у меня есть несколько вопросов об эффективностиНапример: лучше ли использовать...

90
Наложение стилей в css друг на друга

Наложение стилей в css друг на друга

Обнаружил любопытную проблемку, которую не могу решить (или потрачу слишком много времени), ввиду чего обращаюсь за советом

110
Выравнивание заголовков

Выравнивание заголовков

Как сделать, чтобы заголовки были на одном уровне друг под другом ? Я понимаю,что причина в том,что разный размер картинокНо если я делаю одинаковый...

120