webpack3.x 마이그레이션 및 업그레이드-JS 튜토리얼-php.cn

이번에는 webpack3.x 마이그레이션 및 업그레이드에 대해 알려드리겠습니다. webpack3.x 마이그레이션 및 업그레이드 시 주의사항은 무엇인가요?

주제 제외: 0 구성은 매우 변덕스럽고 기본적으로 대부분의 사용자 요구를 충족할 수 없으므로 보지 마십시오. 그러나 더 많은 기본 구성을 추가하면 구성이 상대적으로 간단하고 더 편리해질 수 있습니다. 즉시 사용할 수 있습니다. 결국, Parcel의 0 구성은 이전에 Webpack의 많은 주목을 받았고, Parcel+Vue를 사용하여 간단한 Parcel 템플릿 프로젝트도 작업했습니다. 관심이 있다면 살펴보세요.

1. webpack4의 새로운 기능

0. 설치

는 더 이상 webpack 설치에만 국한되지 않고 webpack-cli도 설치해야 합니다. code>: webpack即可，还需要安装一个webpack-cli：

全局安装

sudo npm install -g webpack webpack-cli

로그인 후 복사

局部安装（当前文件夹）

npm install --save-dev webpack webpack-cli

로그인 후 복사

1. 0配置

默认的入口为 './src/' 和默认出口 './dist'；

对压缩(optimization.minimize)的设置，默认在production时开启，在development时关闭。

默认配置不仅限于上述两项。

2. mode/–mode参数

新增了mode/--mode参数来表示是开发还是生产，mode有两个可选值：development和production，production不支持监听，production侧重于打包后的文件大小，development侧重于构建的速度。

webpack --mode development

로그인 후 복사

也可以在配置文件中配置：

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

로그인 후 복사

3. 对uglifyjs升级

在之前的vue脚手架创建的基于webpack的工程，在webpack.prod.conf.js

전역 설치

class user {
 getUsername() {
  // to do
 }
}
로그인 후 복사
부분 설치(현재 폴더)
rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]
로그인 후 복사

1.0 구성

기본 항목은 './src/' 이고 기본 종료는 입니다. './dist';

압축 설정(optimization.minimize)은 프로덕션 중에는 기본적으로 켜져 있고 개발 중에는 꺼집니다.

기본 구성은 위의 두 항목에 국한되지 않습니다.

2.mode/--mode 매개변수

mode/--mode 매개변수는 개발인지 프로덕션인지를 나타내기 위해 추가됩니다. 모드에는 개발 및 프로덕션이라는 두 가지 선택적 값이 있습니다. 파일 크기 다음으로 개발은 빌드 속도에 중점을 둡니다.

let jsonData = require('./data.json');
import jsonData from './data.json'
import { first } from './data.json'

로그인 후 복사

는 구성 파일에서도 구성할 수 있습니다:

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

로그인 후 복사

3. uglifyjs 업그레이드

이전 vue 스캐폴딩으로 생성된 webpack 기반 프로젝트는 webpack.prod.conf.js에 있습니다. 구성에서 이 줄을 명확하게 볼 수 있습니다:

// UglifyJs는 ES6+를 지원하지 않습니다. 더 나은 트리쉐이킹을 위해 babel-minify를 사용할 수도 있습니다: https://github.com/babel/minify

in webpack4 .0

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\/]node_modules[\/]/,
   priority: -10
  }
 }
})

로그인 후 복사

압축 후 다음과 같이 압축할 수 있습니다.

4 로더를 제거하려면 규칙을 사용해야 합니다.

webpack3.x에서는 이전 버전의 로더가 여전히 유지됩니다. , 및 규칙 두 가지 모두 공존을 사용할 수 있습니다. 새 버전에서는 로더가 완전히 제거되었으며 규칙을 사용해야 합니다.

5.sideEffects

모듈의 package.js에 sideEffects:false를 추가하여 별도로 내보내기를 할 경우 내보내기 이외의 파일은 패키징되지 않으므로 패키징된 파일이 작아집니다.

관련 링크: https://github.com/webpack/webpack/tree/master/examples/side- Effects

6. webpack4는 여러 형태의 모듈 유형을 지원하지만 때로는 조정을 위해 유형을 추가해야 할 수도 있습니다

CommonJS, AMD, ESM 세 가지 유형의 모듈인 경우 javascript/auto를 사용하세요.

EcmaScript 모듈(.mjs)인 경우 javascript/esm을 사용하세요. 다른 모듈 유형이 있는 경우에는 적용되지 않습니다. CommonJS 및 EcmaScript 모듈만 사용할 수 없습니다. javascript/dynamic을 사용하세요. 🎜🎜json 유형 파일인 경우 require 및 import를 사용하여 json을 가져올 수 있습니다. json을 사용하세요. - 공식적으로는 실험적인 기능이라고 합니다. 🎜🎜예: 🎜rrreee🎜🎜7. JSON 파일의 ES6 가져오기를 지원하고 쓸모 없는 코드를 필터링할 수 있습니다. 🎜🎜🎜다음은 json 파일을 가져오는 세 가지 방법입니다. 🎜rrreee🎜에서 import { first }를 사용하여 '에서 가져온 json 파일 ./data.json'은 가져오지 않은 코드를 무시하고 패키징 시 첫 번째 코드만 포함됩니다. 🎜🎜🎜8. CommonsChunkPlugin을 제거하고 Optimization.splitChunks 및 Optimization.runtimeChunk로 대체합니다.🎜🎜🎜여기에는 내용이 많아서 자세히 소개하지 않겠습니다. 미래에 대해서는 아래 3에서 논의할 것입니다. 마이그레이션할 때 간략한 소개가 있을 것입니다.

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

로그인 후 복사

2. 更新对应模块

在webpack升级的同时，对应的许多依赖也需要相应的进行升级，下面是在vuec-cli的脚手架中需要的更新；对于其他工程，注意看控制台的报错，是哪个插件报的错就去升级那个插件，如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next <br>…

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子：

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

로그인 후 복사

写在后面

对于webpack的这次升级这里没有一一列举，选了几个相对关键的点，具体可以去看这里；有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟，目前遇到的基本都解决了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！