Webpack.config.js configuration

Question

Webpack.config.js configuration

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello, I have the following webpack.config.js file, which I would like to run in production mode from my console.

const webpack = require('webpack')

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractSCSS = new ExtractTextPlugin('stylesheets/[name].css')
    //const CopyWebpackPlugin = require('copy-webpack-plugin')

const devBuild = process.env.NODE_ENV !== 'production'
const nodeEnv = devBuild ? 'development' : 'production'

const config = {
    entry: {
        // Add polyfills
        'client-bundle': ['babel-polyfill', 'whatwg-fetch', './client/js/clientEntryPoint.js'],
    },
    output: {
        path: path.resolve(__dirname, 'web/assets/build/'),
        publicPath: '/assets/build/',
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        new CaseSensitivePathsPlugin(),
        extractSCSS,
        // Provide jQuery and lodash to every module (remove if you don't need these)
        new webpack.ProvidePlugin({
            _: 'lodash',
            $: 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(nodeEnv),
            },
        }),
    ],
    module: {
        rules: [
            // Expose webpacks jQuery to the browser so we can reuse this instance e.g. to chain loaded plugins
            { test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.scss$/i, loader: extractSCSS.extract(['css-loader', 'sass-loader']) },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: { limit: 10000, mimetype: 'application/font-woff' }
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: { limit: 10000, mimetype: 'application/octet-stream' }
            },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: { limit: 10000, mimetype: 'image/svg+xml' }
            },
            { test: /\.jpe?g$/, loader: 'file-loader' }
        ],
    }
}

if (devBuild) {
    console.log('Webpack compilando en modo desarrollo')
    config.devtool = '#eval-source-map'
} else {
    config.plugins.push(
        new webpack.optimize.DedupePlugin()
    )
    console.log('Webpack compilando en modo produccion')
}

module.exports = config

I execute it with the following webpack --config webpack.config.js --define process.env.NODE_ENV='production' command but it does not change me to production mode. Thanks for reading this question

javascript webpack

asked by tonitin 14.06.2017 в 16:41

source

2 answers

0

In your Packaje.json add the following line:

  "scripts": {
    "start": "webpack --config webpack.config.js ",
    "test": "webpack --config webpack.config_2.js  ",

  }

in console you execute npm start or npm test and you can define which configuration to run

answered by 14.06.2017 в 18:13

Dynamic buttons Div container just keep the last div and do not accumulate

score 0 · Accepted Answer

This is redundant:

var nodeEnv = process.env.NODE_ENV !== 'production'
const nodeEnv = devBuild ? 'development' : 'production'

Solo de basta:

const ENV = process.env.NODE_ENV || 'production'.

The above says:

If the environment variable NODE_ENV does not exist, return production .

Finally you must set the environment variable in your terminal session.

Bash

export NODE_ENV=development

CMD

set NODE_ENV=development

Powershell

$env:NODE_ENV="development"

It is preferable that in the absence of the environment variable, it is considered as production; otherwise, when you deploy the application you will have to create a bash script to first set the environment variable and then run the application.