vue를 webpack 3X에서 webpack 4.X로 업그레이드하는 전체 프로세스

현재 사용중인 프로젝트는 webpack3.6입니다. 애플리케이션은 vue-cli에서 설치 한 프로젝트입니다. 공식 webpack4는 아직 스캐 폴딩되지 않았으므로 webpack4로 업그레이드하면 수동으로 업그레이드해야합니다. 아래 단계에 따라 업그레이드했습니다.

참고 : 내가 사용하는 npm 버전은 6.4.1이며 터미널에서 npm -v를 실행하여 현재 npm 버전을 볼 수 있습니다.

1. 먼저 웹팩 업그레이드 (먼저 이전 웹팩 제거)

npm uninstall webpack

제거 후 webpack을 설치합니다.이 경우 npm에 따라 해당 webpack 버전이 설치됩니다. 물론 webpack을 설치할 버전을 지정할 수도 있습니다.

npm i  webpack

2. webpack을 설치 한 후 webpack-cli를 설치합니다. webpack-cli를 사용해야하는 이유 주요 기능은 webpack 프로토콜로 해당 서비스에 연결하는 데 사용되는 간단한 클라이언트입니다.

npm i webpack-cli

3. webpack을 업그레이드하고 webpack-cli를 설치 한 후 먼저 프로젝트를 시작하겠습니다.

npm run dev

오류 발견 :

이는 주로 현재 웹팩 버전과 일치하지 않는 webpack-dev-serve 버전으로 인해 발생합니다.
국제 관행에 따라 먼저 이전 webpack-dev-server를 제거한 다음 webpack-dev-server를 설치합니다.

npm i webpack-dev-server

4. webpack-dev-server (3.8.0)를 업그레이드 한 후 npm run dev를 실행하고
계속해서 오류를보고합니다.

이 오류는 html-webpack-pligun의 버전과 현재 웹팩이 일치하지 않기 때문에 발생합니다. 먼저 제거하려면 html-webpack-plugin 설치

npm i html-webpack-plugin

5. html-webpack-plugin 업그레이드 후 npm run dev 실행시
다음과 같은 오류가 발생했습니다.

이 오류는 주로 vue-loader와 현재 웹팩 버전이 일치하지 않아 발생합니다. 제거 후 설치하십시오.

npm i vue-loader

설치 후 build / webpack.base.conf.js에서 구성을 변경해야합니다. 그
전에이
const vueLoaderConfig = require('./vue-loader.conf')
코드를 삭제하고 다음 가져 오기 방법을 변경해야합니다.

const {VueLoaderPlugin} = require('vue-loader')

그런 다음 그림과

같이이 코드 줄을 삭제합니다. 새 vue-loader는 플러그인 형태로 사용되므로 vue-loader 플러그인을 구성한 다음 매개 변수를 구성하여 현재를 알리는 모드 webpack4에 고유 한 환경

  plugins:[
     new VueLoaderPlugin()
  ],
 mode:process.env.NODE_ENV,

6. npm run dev 명령을 실행합니다. 터미널은 오류를보고하지 않았지만 브라우저가 자동으로 열리지 않았으므로 브라우저를 자동으로 열도록 구성을 변경해야합니다. config / index.js에서 찾기, autoOpenBrowser 찾기 : 거짓,이 Ture를 변경

autoOpenBrowser：ture

여기서 변경된 이유는 무엇입니까? build / webpack.dev.conf.js의 dev-server 구성으로 인해 : open은 여기에 구성된 값을 사용합니다.

그런 다음 npm run dev를 실행하십시오.

이 순간, 터미널이 오류를보고하지 않고 마침내 "5130ms에 성공적으로 컴파일 됨"을 보았 기 때문에 매우 흥분 할 것입니다. 그러나 브라우저는 만족스럽지 않고 전체 실수를주지 않을 것입니다. 브라우저입니다, 예, 브라우저입니다. 오류를보고 할 방법이 없습니다. Baidu에 대한이 질문은 module.exports와 import를 함께 사용할 수 없음을 알려줍니다. 당신은 분명히 "mmp"라고 마음 속으로 말할 것입니다. 어디서 사용 했습니까? 인터넷에서이 오류 보고서를 찾을 수 없습니다.

이 문제를 해결하는 것은 매우 간단합니다. .babelrc 파일을 찾은 다음 "plugins"를 찾으면됩니다. [ "transform-vue-jsx", "transform-runtime"], 이것을 다음으로 변경하십시오.

 "plugins": ["transform-vue-jsx"]

그런 다음 오류보고를 허용하면 제거하겠습니다.

npm uninstall babel-plugin-transform-runtime

이 시점에서 우리는 dev에 필요한 구성 업그레이드를 완료했습니다. 다음으로 빌드 업그레이드를 완료해야합니다.

7. npm run build 명령을 실행하면

webpack4에서 코드를 분할하는 방법이 다르며 게임의 새로운 규칙이 있음을 알려줍니다. 좋아요, 변경하는 것만으로는 충분하지 않습니다. build / webpack.prod.conf.js를 찾아 CommonsChunkPlugin으로 오염 된 모든 코드를 주석 처리하거나 삭제하십시오.
그런 다음 새 게임 규칙에 따라 새 패키징 방법을 구성하십시오.

optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true
            },
            vendor:{
              test: /node_modules/,
              name: 'vendor',
              chunks:'all'
          }
        }
        }
      },

8. npm run build를 다시 실행하면 다음과 같은 오류가 나타납니다.

이 오류는 주로 extract-text-plugin이 현재 webpack 버전과 일치하지 않기 때문입니다. webpack4 이후에는 mini-css-extract-plugin을 사용하여 css를 추출합니다. 이 플러그인은 다음과 같습니다. ① 비동기
로딩
② 반복 컴파일 없음, 더 나은 성능
③ 사용하기 더 쉬움
④ CSS의
강력한 모습을 위해서만 설치하고 사용하여 자랑이 있는지 확인합니다! ! !

npm uninstall extract-text-plugin

npm  i  mini-css-extract-plugin

그런 다음 build / webpack.prod.conf.js를 찾습니다.

const ExtractTextPlugin = require('extract-text-webpack-plugin')

이 소개를 다음으로 변경하십시오.

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

그런 다음 pulgins의 새 ExtractTextPlugin ()을 새 MiniCssExtractPlugin으로 바꿉니다.

9. 계속해서 npm run build를 실행
하고 패키징을 완료 할 수 있지만 패키징 후 오류가보고되었습니다. 성질이 나빠서 버그가 있으면 코드를 삭제합니다.

이 오류를보고 할 때 주로 프로덕션 로더를 사용했습니다. extract-text-plugin이 여기에 도입 되었기 때문에 build / utils.js에서 발견되었으므로 여기서는 mini-css-extract-plugin으로 변경했습니다.

const ExtractTextPlugin = require('extract-text-webpack-plugin')

로 변경

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

그런 다음 다음 구성

  return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
``
改成
return [MiniCssExtractPlugin.loader].concat(loaders)

자, 여기서 우리는 기본 업그레이드 작업을 완료했습니다.

webpack4에는 js 패키징 기능이 포함되어 있으므로 uglifyjs-webpack-plugin을 사용하지 않으므로 uglifyjs-webpack-plugin을 제거 할 수 있습니다.

저는 9102 년부터 rimraf를 사용하고 있습니다. 왜 clean-webpack-plugin을 사용하지 않습니까? 관심있는 학생들은 아래 단계에 따라 프로젝트를 계속 업그레이드 할 수 있습니다.

npm uninstall rimraf

그런 다음 clean-webpack-plugin을 설치하십시오.

npm i clean-webpack-plugin

package.json의 시작 명령 변경

"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"

build / webpack.prod.conf.js에서 플러그인을 소개하십시오.

const {CleanWebpackPlugin}=require('clean-webpack-plugin')

plugins：[
  new CleanWebpackPlugin()
]

다른 진행률 표시 줄 설치

npm i progress-bar-webpack-plugin

build / webpack.base.conf.js에 도입 됨

require('./check-versions')() //检验版本插件是否对应
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
  plugins:[
     new VueLoaderPlugin(),
     new ProgressBarPlugin()
  ],

마지막으로 작은 위치를 변경하십시오.
config / index.js 빌드 구성을 찾으십시오.

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

로 변경

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: '',
    assetsPublicPath: '',

패키지 파일에 액세스 할 수 있습니다.

마지막 포인트는 uglifyjs-webpack-plugin, ora, chalk과 같은 불필요한 플러그인을 제거하고 build / bulild.js 파일을 삭제하는 것입니다.

작업이 완료되었습니다. 이미 코드를 사용할 수 있습니다.