웹 페이지 서버 미리 보기 항목 만들기

웹pack-server 서버 실행

webpack-dev-server --mode development --open

패키지에서 사용할 수 있습니다.json에서 스크립트를 설정하여 명령을 간소화합니다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

핫 업데이트 구성---HMR

const webpack = require('webpack')
plugins: [
  new webpack.HotModuleReplacementPlugin()
],
devServer: {
  hot: true
}

포털 파일에 가열 업데이트 구성 추가

// index.jsx

if(module.hot) {
  module.hot.accept(error => {
    if(error) {
      console.log('HRM BUG ')
    }
  })
}

웹팩 성능 최적화

패키지 결과 최적화 & 구축 속도 최적화

압축 코드 웹 팩은 압축 플러그인을 가지고 있습니다

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
//  ...
  //  
  optimization: {
    minimizer:  [new TerserPlugin({
      //  
      cache: true,
      //  
      parallel: true,
      terserOptions: {
        //  
        compress: {
          unused: true,
          drop_debugger: true,
          drop_console: true,
          dead_code: true
        }
      }
    })]
  }
//  ...
}

웹팩 패키지 결과 분석기

npm install webpack-bundle-analyzer

// webpack.config.js
 const BundleAnalyZerPlugin = require('webpack-bundle-analyzer').BundleAnalyZerPlugin
  // ...
  plugins: [
    // ...
    new BundleAnalyZerPlugin()
  ]
  // ...

구축 속도를 높이는 기타 사고방식

// webpack.config.js
// ...
  module: {
    //  ， ， jquery
    noParse: /node_modules\/(jquery\.js)/,
    //  
    test: /\.jsx?/,
    exclude: /node_modules/,  // ， 
    include: / /  //  
    //  ，exclude 
  }
// ...

다중 프로세스 패키지 도구 HappyPack-plugin(일부 로더는 HappyPack을 지원하지 않음)thread-loader-loader(모든 로더 앞에 써야 함)

Tree-Shaking(나쁜 js 코드 제거)

만약 도입된 모듈이 사용되지 않으면 웹팩은 이 모듈을 검사할 것입니다. 사용되지 않으면 포장되지 않습니다.