install-webpack-from-scratch.md

install-webpack-from-scratch.md

my notes ripped shamelessly from https://webpack.academy

1. add webpack yarn add webpack --dev. this adds to devDependencies
2. add {"build": "webpack"} under scripts to package.json. optionally:

• "watch": "webpack --watch",
• "start:dev": "webpack -w & nodemon server/app.js",
• "build-watch": "npm run build -- -w",
• "start-watch": "nodemon server/start.js --watch server --watch db --watch index.js --watch package.json",
• "start-dev": "cross-env NODE_ENV=development npm run start-watch",

3. touch webpack.config.js
4. in webpack.config.js:

const path = require('path')
const ExamplePlugin = require('ExamplePlugin')
const webpack = require('webpack')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public')
  },
  module: {
    rules: [
    ]
  },
  plugins: [
    new ExamplePlugin({})
    new webpack.optimize.UglifyJSPlugin()
    new webpack.ContextReplacementPlugin()
  ]
}

5. under rules here are some common rules:

babel + react: npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

      {
        "exclude": "/node_modules/",
        "include":  __dirname + "/browser/",
        "loader": "babel-loader",
        "options": {
          "presets": ["es2015", "react"]
        },
        "test": /\.jsx?$/
      },

dont forget .babelrc

{
  "presets": ["es2015", "react"]
}

babel-loader:

  {
    test: /\.js$/,
    use: 'babel-loader'
  }

style loader:

  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  }

image loader: (example that uses options on loader)

  {
    test: /\.jpe?g$/,
    use: [
      {loader: 'url-loader', options: {limit: 10000}}
    ]
  }

file-loader:

  {
    test: /\.jpe?g$/,
    use: ['file-loader']
  }