웹 팩 4 설정 해석 및 실전

웹 팩 4 특성
웹 팩 4 가 인기 있 는 두 가지 특성, 0 설정 과 속도 가 빠르다 (속도 상한 선 98% 라 고 함)
일반적인 상황 에서 웹 팩 4 는 낮은 버 전에 비해 production 장면 에서 제3자 가 포장 속도 와 development 장면 에서 현지 서비스 가 처음으로 시작 하 는 속도 가 현저히 향상 되 었 다.
0 설정 은 mode 를 통 해 현재 장면 을 개발 모델 로 지정 합 니까? 생산 모델 로 지정 합 니까? 현재 장면 의 기본 설정 을 자동 으로 설정 하면 사용 자 는 바로 사용 할 수 있 습 니 다. 불필요 한 설정 이 필요 없습니다.
포장 속도 가 빠 르 고 포장 속도 가 현저히 향상 되 는 이 유 는 Optimization 이라는 새로운 옵션 덕분에 다음 과 같이 말 할 것 입 니 다.
설정 옵션 설명
1. 입구 (입장)
응용 프로그램 또는 한 페이지 의 시작 점 입구 입 니 다. 한 배열 을 전달 하면 배열 의 모든 항목 이 html 페이지 마다 하나의 입구 시작 점 단일 페이지 응용 (SPA) 을 실행 합 니 다. 하나의 입구 다 중 페이지 응용 (MPA: 여러 개의 입구

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

entry 의 값 이 문자열 이 라면 포장 한 chunk 이름 은 기본 main 입 니 다. entry 의 값 이 대상 이 라면 모든 key 는 chunk 의 이름 이 고 모든 key 에 대응 하 는 값 은 입구 출발점 입 니 다.
2. 출력 (출력)
output 의 값 은 하나의 대상 이 어야 합 니 다. 적어도 다음 두 개의 속성 을 포함 합 니 다.
filename: webpack 포장 후 출력 파일 의 경로 path: 출력 된 bundle 의 이름 (즉, 압축 된 파일 이름) 을 결정 합 니 다. 이 bundle 들 은 output. path 가 지정 한 디 렉 터 리 에 기록 합 니 다.
단일 입구

output: {
    path: '/dist',
    filename: 'bundle.js'
}

이 설정 은 루트 디 렉 터 리 의 dist 폴 더 에서 압축 된 bundle. js 를 출력 합 니 다. 단일 페이지 에 적용 되 는 설정 입 니 다.
다수 입

output: {
    path: '/dist',
    filename: 'js/[name].js'
}

dist 디 렉 터 리 의 js 폴 더 에 일련의 bundle 을 출력 하 는 것 입 니 다.
이해 하기 어 려 운 설정: ouput. publicPath
html 에서 인용 한 정적 자원 의 디 렉 터 리 를 설정 합 니 다. 대부분의 경우 이 옵션 의 값 은 '/' 입 니 다.
publicPath 는 웹 패키지 파일 을 포장 한 후에 저 장 된 디 렉 터 리 에 영향 을 주지 않 습 니 다. 생 성 된 html 에 응 용 된 정적 자원 입 니 다. 예 를 들 어 그림, css 와 js 파일 의 참조 경 로 를 대응 하 는 보충 입 니 다.
필요 에 따라 외부 자원 을 불 러 오 거나 불 러 오 는 데 있어 서 이 옵션 의 값 은 특히 중요 합 니 다. 설정 이 잘못 되면 자원 을 불 러 올 때 404 를 되 돌려 줍 니 다.
3. 모듈 로 더 (loader)
loaders 는 각종 모듈 의 변환기 라 고 할 수 있 습 니 다. 파일 을 미리 처리 하고 자바 script 을 제외 한 모든 정적 자원 을 분석 하고 포장 할 수 있 습 니 다.
loader 를 다운로드 해 야 설정 할 수 있 습 니 다. 예 를 들 어 npm install -- save - dev css - loadernpm install -- save - dev ts - loader
그리고 웹 팩 의 설정 파일 에서 css 접미사 파일 은 css - loader 로 해석 하고 ts 접미사 파일 은 ts - loader 로 해석 합 니 다.

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

더 많은 loader 설정: webpack loaders
4. 플러그 인 (plugins)
plugins 는 웹 패키지 의 구축 과정 을 사용자 정의 하 는 데 사 용 됩 니 다. 예 를 들 어 사용자 정의 패키지 후의 html 템 플 릿, 사용자 정의 js 와 스타일 파일 의 패키지 여부 등 plugins 의 값 은 new 에서 나 온 플러그 인 인 인 스 턴 스 입 니 다.
웹 팩 4 는 성능 최적화 에 자주 사용 되 는 plugin UglifyjsWebpackPlugin, Commons ChunkPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin 을 취소 하고 optimization 이라는 설정 항목 을 제공 하여 상기 네 개의 플러그 인 을 대체 할 수 있 습 니 다 (위의 플러그 인 으로 사용 할 수 없다 는 것 이 아니 라 웹 팩 4 자체 에 대체 방안 이 있 습 니 다. 플러그 인 을 사용 하지 않 아 도 됩 니 다)
html - webpack - plugin 은 new 이 플러그 인의 인 스 턴 스 를 통 해 webpack 에서 html 파일 을 컴 파일 할 수 있 습 니 다. 주의해 야 할 것 은 여러 페이지 의 설정 에서 몇 페이지 가 있 는 지, new 몇 개의 인 스 턴 스 를 통 해 plugins 에 들 어 갈 수 있 습 니 다. 그 다음 에 코드 예제 가 있 습 니 다.
html - webpack - inline - source - plugin 이 플러그 인 은 생산 모드 에서 webpack 을 포장 할 때 js 와 css 를 html 에 직접 삽입 하여 요청 소 모 를 줄 이 는 데 사용 합 니 다. 모든 상황 에서 사용 하기에 적합 한 것 이 아니 라 파일 이 클 때 라벨 을 통 해 자원 을 도입 하 는 것 을 추천 합 니 다.(실행 시 파일 이 작 습 니 다. 다음 플러그 인 을 통 해 runtime 코드 를 html 에 직접 삽입 합 니 다)
더 많은 플러그 인 및 설정: webpack plugins
5. 모드 (모드)
mode 는 웹 팩 4 에 추 가 된 매개 변수 옵션 입 니 다. 세 가지 값 이 있 습 니 다. development, production, none 입 니 다. 개발 모델 과 생산 모델 에 필요 한 웹 팩 의 설정 은 조금 다 릅 니 다 (그러나 대부분 같 습 니 다)따라서 두 개의 웹 팩 설정 파일 을 만 들 수 있 습 니 다. 각각 개발 모델 과 생산 모델 에 사용 할 수 있 습 니 다. 그 밖 에 현재 어느 모델 에 있 는 지 가리 키 면 웹 팩 내부 에서 최적화 하 는 데 유리 합 니 다. 예 를 들 어 일부 플러그 인 은 생산 모델 에서 사용 합 니 다.
mode 의 값 을 development 과 production 의 하나 로 지정 하여 웹 팩 이 어떤 모드 에 있 는 지, 기본 값 은 production 입 니 다.
mode 는 development 일 때 코드 의 구축 속도 와 개발 체험 을 향상 시 키 는 것 을 중시 합 니 다.

module.exports = {
  mode: 'development',
  cache: true,
  devtools: "eval",
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
  ]
};

mode 가 production 일 때 코드 최적화, 예 를 들 어 압축, 역할 영역 향상 등 을 제공 합 니 다.

module.exports = {
  mode: 'production',
  plugins: [
    new UglifyJsPlugin(/* ... */),
    new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("production")
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}
 

명령 행 을 통 해 아래 명령 을 실행 하여 모드 웹 팩 -- mode = production 을 지정 할 수도 있 습 니 다.
6. 최적화 (최적화)
이 옵션 도 wepack 4 에 추 가 된 것 으로 포장 최적화 정책 을 사용자 정의 하 는 데 사 용 됩 니 다.
minimizer 는 production 모드 에서 이 설정 은 기본적으로 헷 갈 리 는 코드 를 압축 합 니 다. 그러나 설정 항목 이 너무 적어 서 최적화 코드 에 대한 요 구 를 만족 시 킬 수 없습니다. 다음은 비교적 유연 한 최적화 설정 입 니 다.

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  optimization: {
    minimizer: [
      //    js    ，        
      new UglifyJsPlugin({
        exclude: /\.min\.js$/, //     ".min.js"     ，                    ，         
        cache: true,
        parallel: true, //       ，    cpu
        sourceMap: false,
        extractComments: false, //     
        uglifyOptions: {
          compress: {
            unused: true,
            warnings: false,
            drop_debugger: true
          },
          output: {
            comments: false
          }
        }
      }),
      //     css  
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessorOptions: {
          safe: true,
          autoprefixer: { disable: true }, //     !!!!!
          mergeLonghand: false,
          discardComments: {
            removeAll: true //     
          }
        },
        canPrint: true
      })
    ]
  }
}

UglifyJSPlugin 은 여러분 이 자주 사용 하 는 플러그 인 입 니 다. 여기 서 비교적 밝 은 곳 은 압축 된 js 를 걸 러 내 고 포장 속 도 를 높 일 수 있 으 며 2 차 압축 으로 인 한 알 수 없 는 bug 를 피 할 수 있 습 니 다.
OptimizeCssAssetsPlugin 은 css 파일 의 출력 을 최적화 하 는 데 사 용 됩 니 다. 최적화 전략 은 중복 되 는 스타일 정 의 를 제거 하고 스타일 규칙 에 남아 있 는 인 자 를 제거 하 며 필요 하지 않 은 브 라 우 저 접 두 사 를 제거 하 는 등 플러그 인의 인자 autoprefixer: {disable: true} 을 포함 합 니 다. 그렇지 않 으 면 이 플러그 인 은 우리 가 autoprefix 로 추가 한 접 두 사 를 모두 제거 합 니 다.(이 플러그 인 은 불필요 하 다 고 생각 하기 때 문)
runtime Chunk 는 웹 팩 에서 컴 파일 된 실행 코드 를 분리 합 니 다. 즉, 우리 가 이전에 manifest 가 된 코드 블록 입 니 다. 파일 을 만 드 는 데 편리 하면 이 매개 변수 항목 (runtime Chunk) 을 캐 시 할 수 있 습 니 다.여러 종류의 값 이 있 습 니 다. 그 중에서 single 은 모든 chunk 가 실 행 될 때 코드 를 하나의 파일 에 포장 합 니 다. multiple 은 모든 chunk 가 실 행 될 때 코드 에 대해 각각 runtime 파일 을 포장 합 니 다. 우 리 는 위 에서 말 한 Inline Manifest WebpackPlugin 플러그 인 에 맞 춰 실 행 될 때 코드 를 html 파일 에 직접 삽입 할 수 있 습 니 다. 이 코드 가 매우 적 기 때문에 이렇게 하면 피 할 수 있 습 니 다.요청 한 비용 을 면 제 받 습 니 다. Inline Manifest WebpackPlugin 플러그 인의 순 서 는 Html WebpackPlugin 이후 여야 합 니 다. 그렇지 않 으 면 컴 파일 에 실패 할 수 있 습 니 다.

var HtmlWebpackPlugin = require('html-webpack-plugin')
var InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
module.exports = {
  optimization: {
    runtimeChunk: 'single'
    //    
    // runtimeChunk: {
    //   name: 'runtime'
    // }
  },
  plugins: [
     new HtmlWebpackPlugin({
       template: '../src/index.html',
       filename: 'article.html',
       chunks: ['article', 'vendors', 'runtime']
     }),
     new InlineManifestWebpackPlugin(), //  htmlWebpackPlugin       
  ]
}

splitChunks 는 이해 하기 어 려 운 설정 항목 입 니 다. webpack 4 는 Commons ChunkPlugin 플러그 인 을 제외 하고 splitChunks 의 우아 한 분리 패키지 설정 은 다음 과 같 습 니 다.

splitChunks: {
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      minSize: 30000,
      minChunks: 1,
      chunks: 'initial',
      priority: 1 //              ，         
    },
    commons: {
      test: /[\\/]src[\\/]common[\\/]/,
      name: 'commons',
      minSize: 30000,
      minChunks: 3,
      chunks: 'initial',
      priority: -1,
      reuseExistingChunk: true //                   
    }
  }
}

이 설정 은 우선 node modules 의 모듈 을 vendors. js 로 통일 적 으로 포장 하여 분리 파일 의 최소 부 피 를 30k 로 제한 합 니 다 (압축 전)웹 팩 은 30k 이하 의 코드 가 분리 되 고 작은 사이즈 로 한 번 더 불 러 오 라 고 요청 해 야 한다 고 생각 하기 때문에 원가 가 너무 높다. 이 값 은 대량의 시간 을 통 해 정 리 된 것 이 고 공유 모듈 을 제외 하고 분리 된다. 예 를 들 어 src 디 렉 터 리 에 utils 등 전역 적 으로 공용 되 는 js 파일 이 몇 개 있 기 때문에 따로 추출 하여 하나의 comons. js 로 포장 할 수 있다. 이 부분 파일 은 자주 바 뀌 지 않 기 때문이다.캐 시
데모 주소