Webpack HotServer Quick Start

_Webpack HotServer Quick Start.md

Hi!

This is an example of how to quick start [Webpack Hot Server], without hard-coding them.

Use

node serve.js enjoy it !

Todo

• XO Support [✔️]

package.json

{
  "name": "your project name",
  "version": "0.0.1",
  "description": "your project description",
  "scripts": {
    "dev": "node serve.js"
  },
  "keywords": [
    "your keyword"
  ],
  "author": "you",
  "license": "your license",
  "bugs": {
    "url": "#{your repo}/issues"
  },
  "devDependencies": {
    "css-loader": "^0.28.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.29.0",
    "node-sass": "^4.5.3",
    "opn": "^5.1.0",
    "pug": "^2.0.0-rc.2",
    "pug-loader": "^2.3.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.2.0",
    "webpack-dev-server": "^2.5.1"
  }
}

serve.js

const Server = require('webpack-dev-server')
const webpack = require('webpack')
const webpackConfig = require('./webpack.config')
const compiler = webpack(webpackConfig)

const options = {
  hot: true,
  quiet: true,
  historyApiFallback: true,
  overlay: true,
  noInfo: true,
  disableHostCheck: true
}

const server = new Server(compiler, options)
const port = 4000
const uri = `http://localhost:${port}`

server.listen(port, _ => require('opn')(uri))

webpack.config.js

// Emmmmmmmmmmmmm _(:зゝ∠)_
const webpack = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

const { resolve } = require('path')
const resolveHere = path => resolve(__dirname, path)

const docJs = resolveHere('./doc.js') // your entry
const index = resolveHere('./index.pug') // your template

const rules = [
  {
    enforce: 'pre',
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'xo-loader'
  },
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  },
  {
    test: /\.s(a|c)ss$/,
    // yes, i use scss
    use: ['style-loader', 'css-loader', 'sass-loader']
  },
  {
    test: /\.pug$/,
    use: ['pug-loader']
  }
  // add more loader here
]

module.exports = {
  entry: ['webpack-dev-server/client?/', 'webpack/hot/dev-server', docJs],
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: { rules },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HTMLWebpackPlugin({
      inject: true,
      template: index
    }),
    new FriendlyErrorsWebpackPlugin()    
  ]
}