webpack init configuration

0_webpack_init.txt

Below 2 files are needed!

package.json

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=production node_modules/.bin/webpack --mode production",
    "dev": "NODE_ENV=development node_modules/.bin/webpack --mode development",
    "watch": "npm run dev -- --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "img-loader": "^2.0.1",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

webpack.config.js

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

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const isProduction = process.env.NODE_ENV === 'production';
const PurifyCSSPlugin = require('purifycss-webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin')


// the path(s) that should be cleaned
let pathsToClean = ['dist']

// the clean options to use
let cleanOptions = {
  root:    __dirname,
  verbose:  true,
  dry:      false
}

module.exports = {
  entry: {
    app: [
      './src/main.js',
      './src/main.scss',
    ],
    vendor: ['jquery']
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader'],
          fallback: "style-loader",
        })
      },
      {
          test: /\.(svg|eot|ttf|woff|woff2)$/,
          use: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loaders: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash].[ext]'
            }
          },
          'img-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    new ExtractTextPlugin("[name].[hash].css"),
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, './*.html')),
      minimize: isProduction,

    }),
    new webpack.LoaderOptionsPlugin({
      minimize: isProduction,
      debug: false
    }),

    function () {
      this.plugin('done', stats => {
        require('fs').writeFileSync(
          path.join(__dirname, 'dist/manifest.json'),
          JSON.stringify(stats.toJson().assetsByChunkName)
        )
      });
    }

  ]
};