웹 팩 3.0 업그레이드 4.0 방법 절차

1.webpack 3.11 업그레이드 4.26
포장 효율 을 높이 기 위해 웹 팩 3.11 을 바탕 으로 업 그 레이 드 를 했 습 니 다.웹 팩 4.0 발표 이후 0 설정 웹 팩 은 프로젝트 자체 가 제공 하 는'포장'과'압축'기능 을 최적화 시 켰 습 니 다.프로젝트 에서 vue-cli 의 기본 설정 대신 4.0 을 사용 하면 문제 가 적 을 수 있 습 니 다.
2.설치/업그레이드 의존
이러한 의존 도 는 build 과정 에서 새로운 교체 나 오류 보고 에 의존 하 는 것 을 발견 하고 점차적으로 교체 하 는 것 입 니 다.여러 개의 구 덩이 를 만 나 려 면 먼저 webpack,webpack-cli 를 대응 하 는 버 전 으로 업그레이드 할 수 있 습 니 다.
devDependencies:

"extract-text-webpack-plugin": "^4.0.0-beta.0"
"html-webpack-plugin": "^4.0.0-beta.14"
"mini-css-extract-plugin": "^0.9.0" (  optimize-css-assets-webpack    )
"preload-webpack-plugin": "^3.0.0-beta.4"
"script-ext-html-webpack-plugin": "^2.1.3"
"vue-loader": "^15.3.0"
"webpack": "^4.26.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.2.1"
"script-ext-html-webpack-plugin": "^2.1.3"

3.닥 친 문제
웹 팩 업그레이드 후 build 오류:ERROR in./src/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js
해결:vue-loader 를 15.3.0 으로 업그레이드,
webpack.base.conf.js 추가

const {VueLoaderPlugin} = require('vue-loader')
module.exports   
 plugins:[new VueLoaderPlugin()]

설정 파일 수정 webpack.prod.conf.js:
webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
해결:

webpack.prod.conf.js webpackConfig  :
optimization: {
 noEmitOnErrors: true,
 concatenateModules: true,
 splitChunks: {
  chunks: 'all',
  name: 'common',
 },
 runtimeChunk: {
  name: 'runtime'
 }
 }
webpack.prod.conf.js webpackConfig  : 
optimization:{
 namedModules: true
 },

Plugin could not be registered at ‘html-webpack-plugin-before-html-processing'. Hook was not found.
해결:

npm i preload-webpack-plugin@next -D

Tapable.plugin is deprecated. Use new API on .hooks instead
문제:extract-text-webpack-plugin 호 환 문제,기능:extract css into its own file
해결:extract-text-webpack-plugin 마 운 트 해제,mini-css-extract-plugin 설치

 new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css'),
  allChunks: false,
 }),

build 오류:Type Error 에 러:정의 되 지 않 은 프로 퍼티'해시'를 읽 을 수 없습니다.
해결:

      
  //    
  const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  const smp = new SpeedMeasurePlugin();

WARNING in configuration
The ‘mode' option has not been set, webpack will fallback to ‘production' for this value. Set ‘mode' option to ‘development' or ‘production' to enable defaults for each environment.
You can also set it to ‘none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
해결:webpackConfig 추가 모드:'production'
Tapable.plugin is deprecated. Use new API on .hooks instead
해결:

npm i --save-dev extract-text-webpack-plugin@next

extract-text-webpack 에 다운로드 합 니 다[email protected]
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…
해결:

webpack.optimize.Commons ChunkPlugin 관련 설정 제거

webpackConfig 에서 plugins 와 같은 등급 으로 추가

optimization: {
 splitChunks: {
   cacheGroups: {
    commons: {
     name: "commons",
     chunks: "initial",
     minChunks: 2
    }
   }
  }
 },

Unhandled rejection Error: “dependency” is not a valid chunk sort mode

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
 }),

해결:chunks SortMode 를 auto 또는 주석 으로 변경
이로써:npm run build 정상
다음 npm run dev 를 조정 하여 직접 실행 에 성공 하 였 습 니 다.
4.총화
cache 가 열 린 상태 에서 원래 포장 시간 22s 정도,현재 build 가 가장 빠 른 8s 정도 입 니 다.
업그레이드 아이디어:

웹 팩 이전 버 전 마 운 트 해제,새 버 전 웹 팩 설치,웹 팩-cli

loader,plugin 오류 가 발생 하여 loader,plugin 을 업그레이드 합 니 다.어떤 것 은 4.0 에서 지원 하지 않 고 새로운 것 으로 바 꿔 야 합 니 다

ExtractTextPlugin 을 마 운 트 해제 하고 해당 설정 을 삭제 하 며 mini-css-extract-plugin

으로 변경 합 니 다.

환경 모드 설정

기타 wenpack 3.0 최적화 설정 호 환 처리

웹 팩 3.0 업그레이드 4.0 의 방법 과 절차 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 웹 팩 3.0 업그레이드 4.0 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!