[Webpack 2] Intro to the Production Webpack Course

Posted 2020-07-26 Answer1215

There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.

 

In Webpack 2, the config take a fucntion, which accept a env param points to system env.

const {resolve} = require(‘path‘)
module.exports = env => {
  return {
    entry: ‘./js/app.js‘,
    output: {
      filename: ‘bundle.js‘,
      path: resolve(__dirname, ‘dist‘),
      pathinfo: !env.prod,
    },
    context: resolve(__dirname, ‘src‘),
    devtool: env.prod ? ‘source-map‘ : ‘eval‘,
    bail: env.prod,
    module: {
      loaders: [
        {test: /\.js$/, loader: ‘babel!eslint‘, exclude: /node_modules/},
        {test: /\.css$/, loader: ‘style!css‘},
      ],
    },
  }
}

 

Package.json scripts:

  "scripts": {
    "test": "karma start",
    "check-coverage": "istanbul check-coverage --statements 23 --branches 5 --functions 9 --lines 24",
    "watch:test": "npm test -- --auto-watch --no-single-run",
    "validate": "npm-run-all --parallel validate-webpack:* lint test --serial check-coverage",
    "validate-webpack:dev": "webpack-validator webpack.config.js --env.dev",
    "validate-webpack:prod": "webpack-validator webpack.config.js --env.prod",
    "clean-dist": "rimraf dist",
    "copy-files": "cpy src/index.html src/favicon.ico dist",
    "clean-and-copy": "npm run clean-dist && npm run copy-files",
    "prestart": "npm run clean-and-copy",
    "start": "webpack-dev-server --env.dev --content-base dist",
    "prebuild": "npm run clean-and-copy",
    "prebuild:prod": "npm run clean-and-copy",
    "build": "webpack --env.dev",
    "build:prod": "webpack --env.prod -p",
    "lint": "eslint .",
    "setup": "npm install && npm run validate"
  }