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

7039 단어 webpack
  • 머리말
  • 자동 컴파일 방식
  • 관찰 모드
  • 웹 서버
  • 웹팩 중간부품
  • 요약
  • 앞말

     , yarn run build, , ? , :
    

    자동 컴파일 방식

  • 웹팩스 워치 모드 관찰 모드
  • 웹팩-dev-server 웹 서버
  • 웹팩-dev-middleware 웹팩 중간부품
  • 관찰 모드


    패키지에서요.json에 관찰 모드를 추가한 npmscript 스크립트
    "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
     : 
     : + 
    

    총결산

  • 관찰 모델이 개발에서 실용적이지 않다
  • 웹 서버는 군웅을 압도하고 실용성이 강하며 강력하게 추천합니다. vue-cli가 웹 팩으로 구축한 템플릿은 웹 서버를 사용하는 것입니다
  • 웹팩 중간부품 +express, 플러그인 2개, 프로필 2개(웹pack.config.js+server.js)를 사용하여 복잡하게 설정합니다.
  • 좋은 웹페이지 즐겨찾기