webpack doesn’t compile production

Do you want to request a feature or report a bug?
BUG

What is the current behavior?
FAILS TO COMPILE WHEN RUN “NPM RUN BUILD”, HAS NO ISSUE RUNNING NPM RUN DEV

If the current behavior is a bug, please provide the steps to reproduce.
AT THE MOMENT USING SEED FROM https://github.com/A-Tokyo/generator-at-angular , HOWEVER PROBLEM DOESN”T ONLY HAPPEN ON THAT PARTICULAR SEED AND I”VE TRIED OTHERS.

What is the expected behavior?
COMPILED DIST FOLDER READY TO UPLOAD VIA FTP TO THE SERVER.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
WIN10, POWERSHELL, NPM, NODE ALL LATEST VERSIONS. ANGULAR1.X

=======WEBPACK.CONFIG.JS=============
'use strict';
const _ = require('lodash');
let _configs = {

  // global section
  global: require(__dirname + '/config/webpack/global'),

  // config by enviroments
  production: require(__dirname + '/config/webpack/environments/production'),
  development: require(__dirname + '/config/webpack/environments/development')
};

let _load = function() {
  let ENV = process.env.NODE_ENV
    ? process.env.NODE_ENV
    : 'production';

  console.log('Current Environment: ', ENV);

  // load config file by environment
  return _configs && _.merge(
    _configs.global(__dirname),
    _configs[ENV](__dirname)
  );
};

module.exports = _load();


========PACKAGE.JSON==========
{
  "name": "sjoPintor",
  "version": "0.1.0",
  "description": "Awesome Exterior/Interior painting company in Costa Rica",
  "homepage": "http://sanjosepintor.com",
  "repository": "",
  "author": {
    "name": "This one guy",
    "email": "god.the@gmail.com",
    "url": ""
  },
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack -p --colors",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
    "docs": "node_modules/node-static/bin/cli.js ./docs -i docs.html -p 8081",
    "start": "npm run dev",
    "test": "karma start --log-level debug --single-run",
    "tests": "karma start --log-level debug"
  },
  "dependencies": {
    "angular": "^1.6.3",
    "angular-animate": "^1.6.3",
    "angular-aria": "^1.6.3",
    "angular-cookie": "^4.1.0",
    "angular-dynamic-locale": "^0.1.32",
    "angular-loading-bar": "^0.9.0",
    "angular-local-storage": "^0.5.2",
    "angular-material": "^1.1.3",
    "angular-messages": "^1.6.3",
    "angular-mocks": "^1.6.1",
    "angular-sanitize": "^1.6.3",
    "angular-translate": "^2.15.1",
    "angular-translate-loader-static-files": "^2.15.1",
    "angular-translate-storage-cookie": "^2.15.1",
    "angular-translate-storage-local": "^2.15.1",
    "angular-ui-router": "^0.4.2",
    "angulartics": "^1.4.0",
    "angulartics-google-analytics": "^0.4.0",
    "babel-core": "^6.14.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-angularjs-annotate": "^0.5.2",
    "babel-plugin-syntax-flow": "^6.13.0",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-es2017": "^6.16.0",
    "babel-preset-stage-1": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "bootstrap-sass": "^3.3.7",
    "es6-promise": "^4.0.3",
    "font-awesome": "^4.6.3",
    "lodash": "^4.17.4",
    "manifest-revision-webpack-plugin": "^0.3.0",
    "material-icons": "^0.1.0",
    "moment": "^2.17.1",
    "ngmap": "^1.18.4",
    "normalize-css": "^2.3.1",
    "oclazyload": "^1.1.0",
    "satellizer": "^0.15.5",
    "url": "^0.11.0",
    "webpack": "2.1.0-beta.25"
  },
  "devDependencies": {
    "angular-translate": "^2.15.1",
    "assets-webpack-plugin": "^3.4.0",
    "autoprefixer": "^6.5.0",
    "babel-loader": "^6.2.5",
    "baggage-loader": "^0.2.4",
    "clean-webpack-plugin": "^0.1.10",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "eslint-loader": "~1.5.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "imagemin-pngquant": "^5.0.0",
    "jasmine": "^2.2.1",
    "jasmine-core": "^2.2.0",
    "karma": "^0.13.2",
    "karma-jasmine": "^0.3.5",
    "karma-phantomjs2-launcher": "^0.5.0",
    "karma-webpack": "^1.6.0",
    "ngtemplate-loader": "^1.3.1",
    "node-sass": "^3.4.0",
    "node-static": "^0.7.9",
    "postcss-loader": "^0.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "2.1.0-beta.7"
  },
  "engines": {
    "node": ">=0.12.0"
  }
}



==========WEBPACK.GLOBAL.JS=============
'use strict';
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const Manifest = require('manifest-revision-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');


const rootPublic = path.resolve('./src');
const NODE_ENV = process.env.NODE_ENV || "production";
const DEVELOPMENT = NODE_ENV === "production" ? false : true;
const stylesLoader = 'css?root=' + rootPublic + '&sourceMap!postcss!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true';

module.exports = function (_path) {
  const rootAssetPath = _path + 'src';

  let webpackConfig = {
    // entry points
    entry: {
      app: _path + '/src/app/index.bootstrap.js'
    },

    // output system
    output: {
      path: _path + '/dist',
      filename: '[name].js',
      publicPath: '/'
    },

    // // global dev server configs
    // // uncomment the following lines if you need to configure a proxy globaly
    // devServer: {
    //   // configure proxy
    //   proxy: {
    //     '/api/*': {
    //       target: 'https://jsonplaceholder.typicode.com/',
    //       changeOrigin: true,
    //       // uncomment this if you need to remove the /api prefix from the url
    //       // pathRewrite: {'^/api': ''},
    //     },
    //   },
    // },

    // resolves modules
    resolve: {
      extensions: ['.js', '.es6', '.jsx', '.scss', '.css'],
      alias: {
        _appRoot: path.join(_path, 'src', 'app'),
        _images: path.join(_path, 'src', 'app', 'assets', 'images'),
        _stylesheets: path.join(_path, 'src', 'app', 'assets', 'styles'),
        _scripts: path.join(_path, 'src', 'app', 'assets', 'js')
      }
    },

    // modules resolvers
    module: {
      noParse: [],
      loaders: [{
        test: /\.html$/,
        loaders: [
          {
            loader: 'ngtemplate',
            query: {
              relativeTo: path.join(_path, '/src')
            }
          }, {
            loader: 'html',
            query: {
              attrs: ['img:src', 'img:data-src']
            }
          }
        ]
      }, {
        test: /\.js$/,
        exclude: [
          path.resolve(_path, "node_modules")
        ],
        loaders: [
          {
            loader: 'babel',
            query: {
              cacheDirectory: false
            }
          },
          'baggage?[file].html&[file].css'
        ]
      }, {
        test: /\.css$/,
        loaders: [
          'style',
          'css?sourceMap',
          'postcss'
        ]
      }, {
        test: /\.(scss|sass)$/,
        loader: DEVELOPMENT ? ('style!' + stylesLoader) : ExtractTextPlugin.extract({
          fallbackLoader: "style",
          loader: stylesLoader
        })
      }, {
        test: /\.(ttf|otf|svg|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loaders: [
          {
            loader: 'url-loader',
            query: {
              name: 'assets/fonts/[name]_[hash].[ext]'
            }
          }
        ]
      },
      /*
       * Uncomment the following lines to load all the images to assets/images
       * and access them through 'assets/images/[name].[ext]'
       * p.s: some prefer to use copyWebpackPlugin to copy images as static files
       * This is done below in the plugins part
       */
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/i,
      //   loaders: [
      //     {
      //       // load images to /assets/images/[name].[ext]
      //       loader: 'file-loader',
      //       query: {
      //         name: 'assets/images/[name].[ext]'
      //       }
      //     }
      //   ]
      // }
      ]
    },

    // load plugins
    plugins: [
      new webpack.LoaderOptionsPlugin({
        options: {
          // PostCSS
          postcss: [autoprefixer({browsers: ['last 5 versions']})],
        }
      }),
      // new webpack.ProvidePlugin({
      //
      //     $: 'jquery',
      //     jQuery: 'jquery',
      //     'window.jQuery': 'jquery',
      //
      //
      //     moment: 'moment',
      //     'window.moment': 'moment',
      //
      //
      //     _: 'lodash',
      //     'window._': 'lodash'
      //
      // }),
      /*
      * copyWebpackPlugin
      * copies json files from src/assets/data to dist/assets/data
      * copies image files from src/assets/images to dist/assets/images
      * To be accessed through static links
      */
      new CopyWebpackPlugin([
        { from: 'src/assets/data', to: `${_path}/dist/assets/data`},
        { from: 'src/assets/images', to: `${_path}/dist/assets/images`}
      ]),
      new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(NODE_ENV)
      }),
      new webpack.NoErrorsPlugin(),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.optimize.AggressiveMergingPlugin({
        moveToParents: true
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        async: true,
        children: true,
        minChunks: Infinity
      }),
      new Manifest(path.join(_path + '/config', 'manifest.json'), {
        rootAssetPath: rootAssetPath,
        ignorePaths: ['.DS_Store']
      }),
      new ExtractTextPlugin({
        filename: 'assets/styles/css/[name]' + (NODE_ENV === 'development' ? '' : '.[chunkhash]') + '.css',
        allChunks: true
      }),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.join(_path, 'src', 'tpl-index.ejs')
      })
    ]
  };

  return webpackConfig;

};



========WEBPACK.DEVELOPMENT.JS===========
const webpack = require('webpack');

module.exports = function(_path) {
  return {
    context: _path,
    devtool: 'cheap-source-map',
    devServer: {
      contentBase: './dist',
      info: true,
      hot: true,
      inline: true,
      host: '0.0.0.0',
      port: 8080
      // // uncomment the following lines if you need to configure a proxy for dev env
      // // configure proxy
      // proxy: {
      //   '/api/*': {
      //     target: 'https://jsonplaceholder.typicode.com/',
      //     changeOrigin: true,
      //     // uncomment this if you need to remove the /api prefix from the url
      //     // pathRewrite: {'^/api': ''},
      //   }
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]
  };
};




========WEBPACK.PRODUCTION.JS==========
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = function(_path) {
  return {
    context: _path,
    devtool: 'cheap-source-map',
    output: {
      publicPath: '/',
      filename: '[name].[chunkhash].js'
    },
    plugins: [
      new CleanWebpackPlugin(['dist'], {
        root: _path,
        verbose: true,
        dry: false
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        warnings: false,
        sourceMap: true,
      })
    ]
  };
};

Author: Fantashit

1 thought on “webpack doesn’t compile production

  1. @secretgspot using caps lock is inappropriate 👎

    @bebraw is not mean, we just have to deal with a lot of issues. That’s why we need to distinguish between support requests and actual bug reports. Support requests should be made on StackOverflow or the Gitter chat. Bug reports need a short and precise description of the bug and a reproducible test case.

    We don’t have any obligation to fix your problem. Help us so that we can help you.

Comments are closed.