摘要:只在中有效你的文件在開發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調(diào)試日志你可以使用來關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議,這幾乎是所有項目都用得到的配置技巧吧
進度匯報原文地址
本文是作者對自己所學的webpack技巧的總結(jié),在沒有指定特殊情況下適用于webpack 3.0版本。
使用webpack --progress --colors這樣可以讓編譯的輸出內(nèi)容帶有進度和顏色。
壓縮在生產(chǎn)環(huán)境中構(gòu)建項目時,使用
webpack -p
這行代碼在webpack 2中還會自動設(shè)置
process.env.NODE_ENV === "production"復(fù)數(shù)文件打包
通過設(shè)置output屬性為[name].js來導(dǎo)出復(fù)數(shù)包。下面的例子將會生成a.js和b.js。
module.exports = { entry: { a: "./a", b: "./b" }, output: { filename: "[name].js" } }
擔心會重復(fù)打包?使用 CommonsChunkPlugin 來把通用部分移入一個新的輸出文件中。
plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]
分離app文件與第三方庫文件
使用CommonsChunkPlugin將第三方代碼移動到vendor.js中。
var webpack = require("webpack") module.exports = { entry: { app: "./app.js", vendor: ["jquery", "underscore", ...] }, output: { filename: "[name].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor") ] }
讓我們來看看,CommonsChunkPlugin是怎么起作用的:
我們指定了一個叫vendor的入口,并且它加載了jquery等第三方庫。
CommonsChunkPlugin識別到這些第三方庫在app.js中出現(xiàn)重復(fù),便將app.js中的第三方庫都移除。
在vendor.js中,CommonsChunkPlugin還加入了webpack的運行時間。
資源映射 (webpack 1)參考鏈接:Code splitting
最好的資源映射選項是cheap-module-eval-source-map。當使用chrome/firefox的開發(fā)者工具時,它會顯示原始資源文件。另一方面,它比source-map 和 eval-source-map更快。
// 只在webpack 1中有效 const DEBUG = process.env.NODE_ENV !== "production" module.exports = { debug: DEBUG ? true : false, devtool: DEBUG ? "cheap-module-eval-source-map" : "hidden-source-map" }
你的文件在chrome開發(fā)者工具中顯示為webpack:///foo.js?a93h。如果我們希望文件名顯示得更清晰呢,比如說webpack:///path/to/foo.js?
output: { devtoolModuleFilenameTemplate: "webpack:///[absolute-resource-path]" }
資源映射(webpack 2-3)參考鏈接: devtool documentation
在webpack 2-3版本中,最好的資源映射選項是cheap-module-source-map,因為cheap-module-eval-source-map策略已經(jīng)不能在chrome/firefox中顯示正確的路徑。
const DEBUG = process.env.NODE_ENV !== "production" module.exports = { devtool: DEBUG ? "cheap-module-source-map" : "hidden-source-map" }
如果你正在使用extract-text-webpack-plugin,可以用"source-map"替代,否則css的資源映射會不起作用。
// 只有當你使用extract-text-webpack-plugin時 module.exports = { devtool: DEBUG ? "source-map" : "hidden-source-map" }
同樣的, 想要 webpack:///path/to/foo.js這樣清晰的路徑,我們可以寫成下面這樣:
output: { devtoolModuleFilenameTemplate: "webpack:///[absolute-resource-path]" }
輸出css文件參考鏈接: devtool documentation
這是一個復(fù)雜的過程,你可以在這里找到答案。(譯者注:這篇指南目前還沒有翻譯。)
開發(fā)模式你想要某些配置只存在于開發(fā)環(huán)境中嗎?
const DEBUG = process.env.NODE_ENV !== "production" // Webpack 1 module.exports = { debug: DEBUG ? true : false, devtool: DEBUG ? "cheap-module-eval-source-map" : "hidden-source-map" } // Webpack 2 module.exports = { devtool: DEBUG ? "cheap-module-source-map" : "hidden-source-map" }
在webpack 1中,打包你的項目資源時,通過 env NODE_ENV=production webpack -p 來調(diào)用webpack命令。
而在webpack 2中,只要webpack -p就可以了,因為webpack自動幫你設(shè)置了NODE_ENV。
你想知道資源包中有哪些“重量級”依賴嗎?使用webpack-bundle-size-analyzer吧。
$ yarn global add webpack-bundle-size-analyzer $ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer jquery: 260.93 KB (37.1%) moment: 137.34 KB (19.5%) parsleyjs: 87.88 KB (12.5%) bootstrap-sass: 68.07 KB (9.68%) ...
如果你正在生成資源映射,你也可以使用source-map-explorer,它能夠獨立于webpack工作。
$ yarn global add source-map-explorer $ source-map-explorer bundle.min.js bundle.min.js.map
更小的react項目參考鏈接:
webpack-bundle-size-analyzer
source-map-explorer
react會默認生成一些開發(fā)工具,而在生產(chǎn)環(huán)境中你并不需要它們。使用EnvironmentPlugin來讓他們?nèi)说罋绨伞_@大概會節(jié)約30kb左右的空間。
plugins: [ new webpack.EnvironmentPlugin({ NODE_ENV: "development" }) ]
在webpack 1中,使用env NODE_ENV=production webpack -p命令啟動webpack來打包資源。而在webpack 2中,只要webpack -p就可以了,理由略。
更小的Lodash參考鏈接: EnvironmentPlugin documentation
Lodash 非常有用,但是我們通常用到的只是其功能中的滄海一粟。 lodash-webpack-plugin 可以使用noop, identity或其他更簡化的選項來替換 feature sets,來幫助你減少lodash占用的空間。
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); const config = { plugins: [ new LodashModuleReplacementPlugin({ path: true, flattening: true }) ] };
這種方法可以幫助你省下至少10kb。如果你的項目中l(wèi)odash的比重很高,那你節(jié)省的資源會更多。
引入文件夾中所有文件你是不是曾經(jīng)嘗試過下面的代碼卻發(fā)現(xiàn)不起作用?
require("./behaviors/*") /* 看似很正確 */
事實上,你應(yīng)該使用require.context。
// http://stackoverflow.com/a/30652110/873870 function requireAll (r) { r.keys().forEach(r) } requireAll(require.context("./behaviors/", true, /.js$/))
清除extract-text-webpack-plugin日志參考鏈接: require.context
如果你在使用extract-text-webpack-plugin時看過下面的調(diào)試日志:
Child extract-text-webpack-plugin: + 2 hidden modules Child extract-text-webpack-plugin: + 2 hidden modules Child extract-text-webpack-plugin: + 2 hidden modules
你可以使用stats: { children: false }來關(guān)閉它:
/* webpack.config.js */ stats: { children: false, },
總結(jié)參考鏈接: extract-text-webpack-plugin#35
以上就是rstacruz總結(jié)的13條關(guān)于webpack的建議,這幾乎是所有項目都用得到的Webpack配置技巧吧~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90131.html
摘要:只在中有效你的文件在開發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調(diào)試日志你可以使用來關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議,這幾乎是所有項目都用得到的配置技巧吧 原文地址 本文是作者對自己所學的webpack技巧的總結(jié),在沒有指定特殊情況下適用于webpack 3.0版本。 進度匯報 使用webpack --progress --colors這樣可以讓編譯的輸出...
摘要:只在中有效你的文件在開發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調(diào)試日志你可以使用來關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議,這幾乎是所有項目都用得到的配置技巧吧 原文地址 本文是作者對自己所學的webpack技巧的總結(jié),在沒有指定特殊情況下適用于webpack 3.0版本。 進度匯報 使用webpack --progress --colors這樣可以讓編譯的輸出...
摘要:但這并不意味著依賴版本是鎖死的。黃色表示不符合指定的語義化版本范圍,比如大版本升級,升級可能會遇到兼容性問題。文件可以列出不想打包的文件,避免把一些無關(guān)的文件發(fā)布到上。 作者: LeanCloud weakish 分享一些 npm 包管理工具的實用小竅門,希望能夠略微提高下前端、Node.js 開發(fā)者的生活質(zhì)量。 絕大多數(shù)前端和 Node.js 開發(fā)者每天的日常工作都離不開 npm,不...
摘要:上周末看這篇文章時,偶有靈光,所以,分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號,以后有新的文章,將在微信公眾號直接推送給各位,非常感謝。 前端切圖神器 avocode 有了這個神器,切圖再也腰不酸,腿不疼了。 這一次,徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制,如果讀完本文還不懂,...
摘要:一個持續(xù)可發(fā)展,不斷加入新功能,方便后期維護的目錄結(jié)構(gòu)究竟是長什么樣子的接下來閏土大叔帶你們一起手摸手學起來。 如何從零開始一個vue+webpack前端工程工作流的搭建,首先我們先從項目的目錄結(jié)構(gòu)入手。一個持續(xù)可發(fā)展,不斷加入新功能,方便后期維護的目錄結(jié)構(gòu)究竟是長什么樣子的?接下來閏土大叔帶你們一起手摸手學起來。 初級前端初始化目錄篇 項目伊始,我們肯定是先在terminal終端命令...
閱讀 3573·2021-10-11 10:59
閱讀 1591·2021-09-29 09:35
閱讀 2259·2021-09-26 09:46
閱讀 3771·2021-09-10 10:50
閱讀 953·2019-08-29 12:17
閱讀 821·2019-08-26 13:40
閱讀 2433·2019-08-26 11:44
閱讀 2103·2019-08-26 11:22