Webpacks

all-in-one-webpack.md

All In One Webpack and Loaders

Steps

Installing

TIPS : -g flags required sudo

• webpack npm install -g webpack webpack-cli or npm install --save-dev webpack npm install -g webpack-cli
• webpack-dev-server (server usage) npm i -g webpack-dev-server or npm i --save-dev webpack-dev-server

Loaders

• css/style npm install --save-dev style-loader css-loader
• sass/scss npm install --save-dev sass-loader sass
• babel(s)

  npm install --save-dev babel-core babel-loader babel-preset-es2015

• typescript npm install --save-dev typescript ts-loader

Running

• watch webpack main.js bundle.js --watch
• watch-as-server `webpack-dev-server
• one-time webpack main.js bundle.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist' || 'build'),
    filename: 'bundle.js' || 'index.js' || 'build.js',
  },
  module: {
    loaders: [{
      // for css/style
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      // for babel(s)
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: { presets: [ 'es2015' ] }
    }],
    rules: [{
      // for typescript
      test: /\.ts?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    }, {
      // for sass/scss
      test: /\.s[ac]ss$/i,
      use: ["style-loader", "css-loader", "sass-loader", ]
    }],
  },
  
  // for typescript
  resolve: { extensions: ['.tsx', '.ts', '.js'] },
};