letops
5/4/2017 - 6:03 PM

Webpack basic configuration

Webpack basic configuration

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack -p --progress",
    "watch": "webpack --watch --progress --color"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-dynamic-import-webpack": "^1.0.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "imports-loader": "^0.7.1",
    "lodash": "^4.17.4",
    "lost": "^8.0.0",
    "postcss-cssnext": "^2.10.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-loader": "^1.3.0",
    "postcss-minify-params": "^1.2.2",
    "postcss-minify-selectors": "^2.1.1",
    "postcss-mixins": "^5.4.1",
    "postcss-nested": "^1.0.1",
    "postcss-partial-import": "^3.1.0",
    "postcss-vertical-rhythm": "^1.1.5",
    "postcss-will-change": "^1.1.0",
    "postcss-zindex-order": "^1.0.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "style-loader": "^0.17.0",
    "webpack": "^2.4.1"
  }
}
module.exports = {
  plugins: [
    require('postcss-custom-media'),
    require('postcss-partial-import')({ extension: '.pcss' }),
    require('postcss-nested'),
    require('lost'),
    require('postcss-cssnext'),
    require('postcss-mixins'),
    require('postcss-will-change'),
    require('postcss-vertical-rhythm'),
    require('postcss-minify-selectors'),
    require('postcss-minify-params'),
  ],
};
// PRODUCTION SPECIFIC CONFIGURATION
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var _ = require('lodash');

var entries = {
  // TODO: Set the entry points, or the files where the compilation will start
  // app: './web/static/js/app.js',
  // appCSS: './web/static/css/app.pcss',
};

// TODO: Remove all the final/converted files every time webpack restarts, this is to prevent
// the use of an incorrect file. The folder in this example is /priv/static, just like in the path example
// in line 60 (it must be the same folder)
var cleanPlugin = new CleanWebpackPlugin(['static'], {
    root: path.resolve('./priv'),
    verbose: true,
    dry: false,
  });

function setCssExt(ext) {
  return ext.replace(/\.js$/, '.css');
};

var generateManifestPlugin = function (compiler) {
  return this.plugin('done', function (stats) {
    stats = stats.toJson();
    var assetStats = stats.assetsByChunkName;

    for (var entryName in assetStats) {
      var entryPath = assetStats[entryName];
      if (/\.(?:pcss|scss|sass|css)$/.test(entries[entryName])) {
        if (_.isArray(entryPath)) {
          assetStats[entryName] = entryPath.map(function (ass) {
            return setCssExt(ass);
          });
        } else {
          assetStats[entryName] = setCssExt(entryPath);
        }
      }
    }

    // IGNORE:
    // return fs.writeFileSync(
    //   path.join(outputDir,
    //   'asset-stats.json'), JSON.stringify(stats.assetsByChunkName, null, 2)
    // );
  });
};

webpackConfiguration = {
  devtool: false,  // Production specific, 'eval' for develop
  entry: entries,

  output: {
    // TODO: Set the directory where the final/converted CSS and JS files will reside, like (for Phoenix):
    // path: path.resolve(__dirname, 'priv/static'),
    publicPath: '/',
    filename: 'js/[name].min.js',  // Production specific
    chunkFilename:  'js/[name].[id].min.js',  // Production specific
  },

  resolve: {
    modules: [
      'node_modules',
      // TODO: Set the directory where the CSS and JS entry files reside, like (for Phoenix):
      // `${__dirname}/web/static/js`,
      // `${__dirname}/web/static/css`,
    ],
  },

  module: {
    noParse: /node_modules\/localforage\/dist\/localforage.js/,
    rules: [
      { test: /\.js$/,
        exclude: /(node_modules)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['es2015', { modules: false }], 'stage-2'],
            plugins: [
              'dynamic-import-webpack',
            ],
          }, },
        ], },
      { test: /\.jsx$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react', ['es2015', { modules: false }], 'stage-2'],
              plugins: [
                'dynamic-import-webpack',
              ],
            }, },
        ], },
      { test: /\.pcss$/, exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader'], }), },
      { test: /\.css$/, exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader', }), },
    ],
  },

  plugins: [
      cleanPlugin,
      new ExtractTextPlugin({
        filename: (getPath) => (getPath('css/[name].css').replace('CSS', '')),
        allChunks: true, }),
      // IGNORE: 
      // generateManifestPlugin,
    
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: false,  // Production specific
        compress: {
          warnings: false,  // Production specific
        },
      })
  ],
};


module.exports = webpackConfiguration;