摘要:只在中有效你的文件在开发者工具中显示为。参考链接清除日志如果你在使用时看过下面的调试日志你可以使用来关闭它参考链接总结以上就是总结的条关于的建议,这几乎是所有项目都用得到的配置技巧吧
进度汇报原文地址
本文是作者对自己所学的webpack技巧的总结,在没有指定特殊情况下适用于webpack 3.0版本。
使用webpack --progress --colors这样可以让编译的输出内容带有进度和颜色。
压缩在生产环境中构建项目时,使用
webpack -p
这行代码在webpack 2中还会自动设置
process.env.NODE_ENV === "production"复数文件打包
通过设置output属性为[name].js来导出复数包。下面的例子将会生成a.js和b.js。
module.exports = { entry: { a: "./a", b: "./b" }, output: { filename: "[name].js" } }
担心会重复打包?使用 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中出现重复,便将app.js中的第三方库都移除。
在vendor.js中,CommonsChunkPlugin还加入了webpack的运行时间。
资源映射 (webpack 1)参考链接:Code splitting
最好的资源映射选项是cheap-module-eval-source-map。当使用chrome/firefox的开发者工具时,它会显示原始资源文件。另一方面,它比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开发者工具中显示为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策略已经不能在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
这是一个复杂的过程,你可以在这里找到答案。(译者注:这篇指南目前还没有翻译。)
开发模式你想要某些配置只存在于开发环境中吗?
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 来调用webpack命令。
而在webpack 2中,只要webpack -p就可以了,因为webpack自动帮你设置了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会默认生成一些开发工具,而在生产环境中你并不需要它们。使用EnvironmentPlugin来让他们人道毁灭吧。这大概会节约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。如果你的项目中lodash的比重很高,那你节省的资源会更多。
引入文件夹中所有文件你是不是曾经尝试过下面的代码却发现不起作用?
require("./behaviors/*") /* 看似很正确 */
事实上,你应该使用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时看过下面的调试日志:
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 }来关闭它:
/* webpack.config.js */ stats: { children: false, },
总结参考链接: extract-text-webpack-plugin#35
以上就是rstacruz总结的13条关于webpack的建议,这几乎是所有项目都用得到的Webpack配置技巧吧~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112801.html
摘要:只在中有效你的文件在开发者工具中显示为。参考链接清除日志如果你在使用时看过下面的调试日志你可以使用来关闭它参考链接总结以上就是总结的条关于的建议,这几乎是所有项目都用得到的配置技巧吧 原文地址 本文是作者对自己所学的webpack技巧的总结,在没有指定特殊情况下适用于webpack 3.0版本。 进度汇报 使用webpack --progress --colors这样可以让编译的输出...
摘要:只在中有效你的文件在开发者工具中显示为。参考链接清除日志如果你在使用时看过下面的调试日志你可以使用来关闭它参考链接总结以上就是总结的条关于的建议,这几乎是所有项目都用得到的配置技巧吧 原文地址 本文是作者对自己所学的webpack技巧的总结,在没有指定特殊情况下适用于webpack 3.0版本。 进度汇报 使用webpack --progress --colors这样可以让编译的输出...
摘要:但这并不意味着依赖版本是锁死的。黄色表示不符合指定的语义化版本范围,比如大版本升级,升级可能会遇到兼容性问题。文件可以列出不想打包的文件,避免把一些无关的文件发布到上。 作者: LeanCloud weakish 分享一些 npm 包管理工具的实用小窍门,希望能够略微提高下前端、Node.js 开发者的生活质量。 绝大多数前端和 Node.js 开发者每天的日常工作都离不开 npm,不...
摘要:一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的接下来闰土大叔带你们一起手摸手学起来。 如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手。一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起来。 初级前端初始化目录篇 项目伊始,我们肯定是先在terminal终端命令...
阅读 681·2023-04-25 19:43
阅读 3854·2021-11-30 14:52
阅读 3727·2021-11-30 14:52
阅读 3794·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3812·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6007·2021-11-29 11:00