이 기사에서는 webpack4의 새로운 기능을 소개합니다. 무엇에 주의해야 합니까? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
개발자들이 아직 webpack3.x의 여운을 겪고 있는 가운데, webpack4.x가 조용히 도착했습니다.
사용자들이 가장 기대하는 질문은 다음과 같습니다.
이전 버전과 비교하여 새 버전에서는 어떤 변화가 있나요?
webpack3.x에서 webapck4.x로 마이그레이션하시겠습니까?
webpack4.x를 사용할 때 주의해야 할 점은 무엇인가요?
webpack의 새로운 기능
빌드 도구로서 webpack의 장점은 다음과 같습니다.
webpack.config.js에서 다양한 고유 기능을 구성할 수 있습니다.
구성은 유연하고 변경 가능합니다. ;
하지만 그렇기 때문에 이것이 나쁜 점이기도 합니다. 너무 무작위적이어서 제어하기 어려워 다음과 같은 문제가 발생했습니다.
웹팩을 학습하고 사용하고 연구하는 데 드는 비용이 너무 높습니다(발전 곡선이 너무 가파르다). 소규모 애플리케이션에도 대규모 애플리케이션을 구축하는 것과 동일한 프로세스가 필요합니다. 애플리케이션과 마찬가지로 webpack.config.js를 구성합니다(참새는 작고 모든 내부 장기가 있음).
webpack의 차세대 버전인 webpack 4. x는 기존 문제를 크게 해결했습니다.
다음 6단계를 사용하여 프로젝트 구성을 완료할 수 있습니다.
프로젝트 디렉토리(webpack-demo)를 생성하고 그런 다음 디렉터리를 변경합니다.
package.json 파일을 초기화합니다.
webpack 및 webpack-cli 종속성 로드
프로젝트에 ~/src/index.js 파일을 추가합니다. (index.js가 기본 항목 파일이고 기본 항목 디렉터리는 ~/src입니다. 물론 사용자 정의할 수도 있습니다. package.json의 주요 구성 항목을 지정된 파일로 수정해야 합니다.
index.js 파일 코드는 다음과 같습니다.
console.log('hello webpack.')"scripts": {
"build": "webpack"
}참고: 이것은 NPM
의 스크립트 명령입니다. npm run build 명령을 실행하면 프로젝트에 ~/dist/main.js 파일이 표시됩니다. 명령 창에서 다음 경고 프롬프트를 확인해야 합니다:
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/
이 프롬프트 메시지를 무시하세요. webpack4.x의 프로젝트 초기화 구성은 webpack3.x와 크게 다르지 않지만 webpack4.x에는 필요한 webpack이 없다는 것을 발견했습니다. config.js 구성 파일.
패키징 모드 변경위의 프롬프트 메시지를 다시 살펴보면 '패키징 모드의 구성 항목이 설정되지 않은 경우 기본 패키징 모드는 프로덕션 모드(프로덕션)이고 개발 모드(development)의 경우'라는 의미입니다. 모드 구성 항목을 구성해야 합니다.' 이렇게 말씀하셨으니 독자 여러분도 webpack4를 이해하셔야 할 것 같습니다.
하지만 실제 애플리케이션에서는 개발 모드와 프로덕션 모드를 구분하는 경우가 많지만 webpack4.x에서는 어렵지 않습니다. package.json의 스크립트를 다음과 같이 수정하면 됩니다.
"scripts": {
"dev": "webpack --mode development", // 用于开发模式
"build": "webpack --mode production" // 用于生产模式
}'예! webpack4.x는 그렇게 간단합니다. webpack3.x와 같이 개발 모드와 프로덕션 모드에 대해 각각 두 개의 구성 파일을 정의할 필요가 없습니다.
기본 구성 시작/종료 오버로드구성 파일 webpack.config.js가 없습니다. 이는 구성 작업량을 줄여줄 뿐만 아니라 이제 막 엿보는 우리에게 몇 가지 질문을 불러일으킵니다. 예: 입구/출구를 어떻게 맞춤설정하나요?
webpack.config.js가 없으면 명령줄에 시작/종료 구성 항목을 추가할 수 있으며, 코드는 다음과 같습니다.
"scripts": {
"dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
"build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}이것은 webpack.config.js를 사용하지 않는 단순한 솔루션입니다.
위는 webpack4.x가 가져온 전반적인 변화입니다.
그러나 원본 webpack.config.js 구성 파일의 모듈 및 플러그인 구성 항목의 기능 구현에는 여전히 webpack.config.js를 사용해야 합니다. 웹팩 팀의 계획은 일반적으로 사용되는 일부 로더와 플러그인을 구성하는 것이지만 프로덕션 모드에서 도입하지 않고도 *.js 코드를 압축할 수 있는 UglifyJSPlugin 내장 플러그인만 구현되었습니다. 다른 로더와 플러그인은 webpack.config.js를 통해서만 도입할 수 있습니다.
Webpack 마이그레이션 및 주의 사항webpack4.x의 이러한 변경 사항을 보면 많은 사람들이 webpack3.x에서 webpack4.x로 마이그레이션하는 것이 번거롭지 않느냐고 묻을 뿐만 아니라 webpack.3x와 호환되는 것도 번거롭지 않습니다. 앞서 webpack.config.js를 도입하지 않기 위해 npm 스크립트를 사용했는데, 입구/출구 리로드처럼 webpack.config.js 구성 파일에서도 완료할 수 있습니다. 하지만 webpack4.x에는 주의가 필요한 다음과 같은 문제가 있습니다:
升级到webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。
使用 使用babel-loader 转化ES6->ES5时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成对 babel-loader 的配置。
其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。
webpack4.x的demo
紧接上面的配置：
首先，添加 html-wepback-plugin 和 html-loader 依赖：
npm install html-webpack-plugin html-loader --save-dev
html-webpack-plugin生成html文件（html文件用来加载打包生成 bundle.js 文件），当然你也可以使用webpack支持的各种模板loader，这里使用 html-loader 支持的 *.html 类型模板来生成。
其次，添加 mini-css-extract-plugin 和 css-loader 依赖：
npm install mini-css-extract-plugin css-loader --save-dev
loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的 webpack.config.js 文件。
然后，添加 babel-loader 、@babel/babel-core 和 @babel/babel-preset 依赖：
npm install @babel/core babel-loader @babel/preset-env --save-dev
loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的 webpack.config.js 文件。
修改 package.json 中 scripts 如下：
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
"build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新
npm install webpack-dev-server
在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：
"scripts": {
"dev": "webpack-dev-server --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
"build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},这样一个简单的demo就完成了。
其他的loader和plugin配置和webpack3.x类同。
위 내용은 webpack4의 새로운 기능은 무엇입니까? 무엇에 주의해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
