웹 팩의 자동 컴파일링 세 가지 방식

앞말

 ， yarn run build， ， ？ ， ：

자동 컴파일 방식

관찰 모드

"scripts": {
    "watch": "webpack --watch",
    "build": "webpack"
 }

 ：yarn run watch
 ： 
 ： 

웹 서버

 web 
yarn add webpack-dev-server -D
 package.json web npm script 

"scripts": {
    "watch": "webpack --watch",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
 }

 webpack.config.js devServer 

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

module.exports = {
  //  ， bundle 
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  //  ， 
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    //  dist 
    new CleanWebpackPlugin(['dist']),
    // html-webpack-plugin index.html 
    new HtmlWebpackPlugin({
      title: 'Document'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

 ：yarn run dev
 ： + 

웹팩 중간부품

 webpack express
yarn add express webpack-dev-middleware -D
 package.json web npm script 

"scripts": {
    "watch": "webpack --watch",
    "build": "webpack",
    "dev": "webpack-dev-server --open",
    "server": "node server.js"
 }

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

module.exports = {
  //  ， bundle 
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  plugins: [
    //  dist 
    new CleanWebpackPlugin(['dist']),
    // html-webpack-plugin index.html 
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    //  
    publicPath: '/'
  }
}

server.js   

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')

const app = express()
const config = require('./webpack.config.js')
const compiler = webpack(config)

//  express webpack webpack 
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}))

app.listen(8080, () => {
  console.log('listening on port 8080
')
})

 ：yarn run server
 ： 
 ： + 

총결산