webpack3.0 업그레이드 4.0

문서 목록

1.웹팩 3.11 업그레이드 4.26

2. 설치/업그레이드 종속

3. 문제 발생

4. 요약

1. 웹팩 3.11 업그레이드 4.26
포장 효율을 높이기 위해 웹팩 3.11 기초 위에서 업그레이드, 웹팩 4.0 발표 이후 제로 설정된 웹 패키지는 프로젝트 자체에 제공하는 '패키지' 와 '압축' 기능을 최적화시켰다. 프로젝트가 4.0을 사용하기 시작하면 vue-cli의 기본 설정을 사용하지 않으면 문제가 적을 수도 있다.
2. 설치/업그레이드 의존성
이러한 의존은 몇몇은build 과정에서 의존이 새로운 교체나 오류 보고를 발견하고 점차적으로 교체하는 것이다. 만약에 여러 개의 구덩이를 만나려면 먼저 웹팩, 웹팩-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, 웹팩.base.conf.js 추가

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

설정 파일 웹 패키지 수정.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. 질문: 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 오류: ERROR in TypeError: Cannot read property'hash'of undefined 해결:

         
     //    
     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.hooksinstead 해결:

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

     [email protected]

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization...해결:

웹팩을 제거합니다.optimize.CommonsChunkPlugin 관련 구성

webpackConfig에서plugins와 동급 추가

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

Unhandled rejection Error: "dependency"is not a valid chunk sortmode

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을 마운트 해제하고 대응하는 설정을 삭제하고 미니-css-extract-plugin

으로 변경합니다

구성 환경 모델

기타 wenpack3.0 최적화 구성 호환 처리

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

highcharts 데이터 테이블 설정 두 가지 등효 방식의 쓰기

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

webpack3.0 업그레이드 4.0

좋은 웹페이지 즐겨찾기