webpack은 모듈 번들러입니다. 주요 목표는 JavaScript 파일을 함께 패키지하는 것입니다. 패키지된 파일은 브라우저에서 사용되지만 변환, 번들 또는 패키지에도 사용할 수 있습니다. 이 기사는 주로 Webpack을 여러분과 공유하므로 모든 사람에게 도움이 되기를 바랍니다. .
캐싱을 위해 max-age + cdn과 결합된 [name].[contenthash:8].js 파일 이름을 생성합니다. [name].[contenthash:8].js，结合 max-age + cdn 做缓存。
以前是固定的一个 html， html -》版本号 js 文件（通过webpack打出来的）-》通过版本号确定具体 js。（现在想想不太合理，虽然没和后台耦合这么重）
现在是变动的 html，通过 HtmlWebpackPlugin 打出来（webpack 生成，里面包含版本号的 js）
这样还省了一个串行时间（拉版本号文件）。 同时也便于做灰度，比如发布了需求，让一部分用户先体验，动态打出 html 给到后台即可。（固定 html 则没这么轻松做）
在观麦，css变动会非常的少，这得益于 react-gm 对类名的完善。 既然变动少，把 css 单独出来也不错，使用 ExtractTextPlugin 分离 css。
分离后减少 js 大小，不阻塞 js，同时 css 和 js 可同时拉取。
new CommonsChunkPlugin({name: 'commons'})看打包后的 common 代码，会发现其他模块的id和hash都会打在common中，这样每次 commons 文件都会变，就很难做缓存了。
提供两个文件列表即可，会发现 webpack 吧 id 和 hash 打在 manifest 文件中。这样commons就可以缓存了。btw，没看到官网有介绍，看到的说声。
new CommonsChunkPlugin({names: ['commons', 'manifest']})讲讲代理，本地开始是自己起的服务，没有后台服务，自然需要代理到某个地方。 可通过 devServer.proxy 。也可代理到外网排查 bug，都是源码，查 bug 非常快。
"proxy": {
"/ticket/*": {
"target": "http://dev.guanmai.cn:7413",
"changeOrigin": true
}
}当项目大了后，必然需要打很多包，导致打包时间非常长。 官方推荐做法是把不常变动的文件打DLL。
我们工程就把 react react-dom prop-types classnames mobx mobx-react lodash moment big.js 等打进来。
网上资料都介绍 dll 的 文件名是 [name]_[hash].dll.js, 我们是 [npm version]_dll.js npm version
rrreee
패키징된 Common 코드를 보면 다른 모듈의 ID와 해시가 공통으로 입력되어 Commons 파일이 매번 변경되어 캐시하기 어려운 것을 알 수 있습니다. 두 개의 파일 목록만 제공하면 webpack이 매니페스트 파일에 ID와 해시를 저장하는 것을 확인할 수 있습니다. 이런 식으로 커먼즈를 캐시할 수 있습니다. 그런데, 공식 홈페이지에는 소개가 하나도 없었는데, 알고 계시면 알려주세요.rrreee
로컬 개발에이전트에 대해 이야기해 보겠습니다. 로컬 서비스는 백그라운드 서비스가 없으므로 당연히 어딘가에 에이전트가 있어야 합니다. devServer.proxy를 통해 사용 가능합니다. 또한 에이전트를 이용하여 외부 네트워크에 접속하여 버그를 확인할 수도 있습니다. 모두 소스 코드이므로 버그 확인이 매우 빠릅니다.react react-dom prop-types classnames mobx mobx-react lodash moment big.js 들어올 때까지 기다리세요. 온라인 정보에는 모두 dll의 파일명이 [이름]_[hash].dll.js라고 소개되어 있습니다. 우리는 package.json 버전에서 [npm 버전]_dll.js npm 버전을 읽습니다. 해시를 사용하지 않고 npm 버전을 사용하는 것이 어떨까요? 2차 패키징을 고려할 때 문제가 발생했습니다. DLL을 다시 패키징해야 하는지 판단하는 방법은 무엇입니까? 해시인 경우 어떻게 해야 합니까(해결책을 추천해 주십시오). npm 버전을 사용한다면 버전이 바뀌자마자 리패키징을 하게 됩니다. 예를 들어, React가 업그레이드되면 버전+를 갖고 리패키징을 하게 됩니다. happypackhappypack은 빌드 속도를 크게 향상시키며, 여러 스레드로 패키징할 수 있으며 캐시도 재구축 속도를 높여줍니다. devtool개발용 평가, 프로덕션용 소스 맵(디스플레이 문제 해결, 패키징 속도 희생, 허용 범위 내에서 사용)babel-loadercacheDirectory 기억
noParse && alias
일부 라이브러리 필요하지 않은 경우 noParse 구성은 구문 분석되지 않으며 별칭은 x.min.js 파일을 가리킵니다.
나무 흔들기
는 아직 사용하지 않아서 아직은 때가 아닌 것 같은 느낌입니다. 좋은 글이 있어요. @2.x. 이제 webpack이 별도로 나왔고, 캐시 지원, 멀티 코어 압축 등 더 많은 기능을 가지고 있는데, 꽤 빨랐습니다. webpack.optimize.UglifyJsPlugin은 실제로 uglifyjs-webpack-plugin입니다.
이상한 점은 공식적으로 uglify-es를 기반으로 한다는 것입니다. 하지만 종속성은 여전히 uglify-js라고 생각합니다. 기묘. UglifyJsParallelPlugin
🎜 정식 출시 전에는 멀티코어를 지원하는 webpack-uglify-parallel을 사용했습니다. 속도는 uglifyjs-webpack-plugin과 크게 다르지 않습니다. 🎜🎜글을 작성하면서 github을 뒤져보니 7월에 폐기되어 공식 홈페이지에 통합된 것을 발견했습니다. 🎜🎜Others🎜🎜babel의 babel-minify-webpack-plugin은 옆에 있어주세요. 🎜🎜Script cdn🎜🎜일부 js(gm-fetch babel-polyfill)에는 변경 사항이 거의 없습니다. webpack으로 패키징하는 것은 약간 낭비적입니다. cdn을 통해 얻어서 html 문서에 스크립트 형식으로 넣을 수 있습니다. 🎜🎜분석🎜🎜차트도 있고 매우 직관적인 분석도 있습니다. 나는 그것을 선호한다. 🎜webpack-monitor🎜🎜이전 버전은 webpack-bundle-analyzer🎜🎜관련 권장 사항: 🎜🎜🎜webpack을 사용하여 프런트 엔드 프로젝트를 구축하기 위한 웹 예제 코드🎜🎜🎜🎜 webpack 구성 방법 요약🎜🎜node.js의 npm 및 webpack 구성 방법에 대한 자세한 설명
위 내용은 Webpack 경험 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
