NODE_ENV. Webpack 2. Как выгрузить стили в отдельный css файл?

Question

[RemakeRr]

Привет! Кто разбирается с node и webpack2 ?
Нужна помощь. Проблема такая.
В webpack.config.js настроено так, чтоб при девелопе css-стили файлы не выгружались в отдельные css файлы. а были внутри js-а. А при продакшене выгражались. Но проблема с node_env. У меня windows, думаю из-за этого не получается. При выходе получается, что стили внутри js-файла.
В консоли пишет ""NODE_ENV" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом."
Как решить эту проблему? пробовал разные webpack и npm плагины. В node-е мало разбираюсь.

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var path = require("path");
var bootstrapEntryPoints = require('./webpack.bootstrap.config');

var isProd = process.env.NODE_ENV === 'production' // true or false
var cssDev = ['style-loader', 'css-loader', 'sass-loader']
var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
})

var cssConfig = isProd ? cssProd : cssDev;
var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;

module.exports = {
    entry: {
        app: './src/app.js',
        bootstrap: bootstrapConfig
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.sass$/,
                use: cssConfig,
                /*use: ExtractTextPlugin.extract({
                 fallback: "style-loader",
                 use: ['css-loader','sass-loader'],
                 publicPath: '/dist'
                 })*/
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.pug/,
                loaders: ['html-loader', 'pug-html-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    'file-loader?name=images/[name].[ext]',
                    //'file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
                    'image-webpack-loader'
                ]
            },
            /*{
             test: /\.(woff|woff2|eot|ttf|otf)$/,
             use: ['file-loader?name=fonts/[name].[ext]']
             },
             {
             test: /\.(woff|woff2|eot|ttf|otf)$/,
             use: ['url-loader?limit=10000&name=fonts/[name].[ext]'
             ]
             },*/
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'url-loader?limit=10000&name=fonts/[name].[ext]' },
            { test: /\.(ttf|eot)$/, use: 'file-loader?name=fonts/[name].[ext]' },
            // Bootstrap 3
            {
                test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
                use: 'imports-loader?jQuery=jquery'
            }

        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        //hot: true,
        stats: "errors-only",
        port: 9000,
        open: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Index Html Webpack plugin',
            /*minify: {
             collapseWhitespace: true,
             removeComments: true,
             },*/
            hash: true,
            /*chunks: 'index',*/
            //excludeChunks: ['contact'],
            template: './src/index.pug',
        }),
        /*new HtmlWebpackPlugin({
         title: 'Contact Page',
         minify: {
         collapseWhitespace: true,
         removeComments: true,
         },
         hash: true,
         chunks: ['contact'],
         /!*excludeChunks: ['index'],*!/
         filename: 'contact.html',
         template: './src/contact.html',
         }),*/
        new ExtractTextPlugin({
            filename: '/css/[name].css',
            disable: !isProd,
            //disable: false,
            allChunks: true
        }),
        /*new ExtractTextPlugin({
         filename: 'contact.css',
         disable: false,
         allChunks: true
         }),*/
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        /*new PurifyCSSPlugin({
         // Give paths to parse for rules. These should be absolute!
         paths: glob.sync(path.join(__dirname, 'src/!*.html'))
         })*/
    ]
}

"scripts": {
    "dev": "webpack-dev-server",
    "prod": "npm run clean && webpack -p",
    "clean": "rimraf ./dist/*"
  },

Answer 1

[Александр Мастеров]

cross-env

"scripts": {
  "prod": "cross-env NODE_ENV=production webpack",
}

Comments

[RemakeRr]

Стили выгружаются, но почему-то не подключаются. В консоли "Failed to load resource: net::ERR_FILE_NOT_FOUND" --- /C:/css/bootstrap.css1 и /C:/css/app.css

[Александр Мастеров]

RemakeRr: уберите слэш от сюда:

new ExtractTextPlugin({
  filename: 'css/[name].css',
})

Добавьте publicPath:

output: {
  publicPath: '/',
}

[RemakeRr]

Александр Мастеров: Помогло. Но в css-файле изображения ищет почему-то в /distimages. Как исправить? пробовал с помощью ExtractTextPlugin, не получается. даже если исправить в самом css-е, не получается

[Александр Мастеров]

RemakeRr: если речь про url, то тогда нужно заменить file-loader на url-loader:

use: [
  {
    loader: 'url-loader',
    options: {
      name: 'images/[name].[ext]',
    },
  },
  'image-webpack-loader'
]