大多数项目中会用到的webpack小技巧

时间: 2017-12-01阅读: 1982标签: webpack

原文地址 
本文是作者对自己所学的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') ]
<script src='init.js'></script>
<script src='a.js'></script>

分离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的运行时间。

参考链接:Code splitting

资源映射 (webpack 1)

最好的资源映射选项是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]'
}

参考链接: devtool documentation

资源映射(webpack 2-3)

在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]'
}

参考链接: devtool documentation

输出css文件

这是一个复杂的过程,你可以在这里找到答案。(译者注:这篇指南目前还没有翻译。)

开发模式

你想要某些配置只存在于开发环境中吗?

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

参考链接: 
webpack-bundle-size-analyzer 
source-map-explorer

更小的react项目

react会默认生成一些开发工具,而在生产环境中你并不需要它们。使用EnvironmentPlugin来让他们人道毁灭吧。这大概会节约30kb左右的空间。

plugins: [
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'development'
  })
]

在webpack 1中,使用env NODE_ENV=production webpack -p命令启动webpack来打包资源。而在webpack 2中,只要webpack -p就可以了,理由略。

参考链接: EnvironmentPlugin documentation

更小的Lodash

Lodash 非常有用,但是我们通常用到的只是其功能中的沧海一粟。 lodash-webpack-plugin 可以使用noopidentity或其他更简化的选项来替换 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$/))

参考链接: require.context

清除extract-text-webpack-plugin日志

如果你在使用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配置技巧吧~

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/208

什么是webpack?Webpack的核心概念

Webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外,以至于很长一段时间对webpack都是一知半解的状态

Webpack如何实现一个Loader?

loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或\\\"加载\\\"模块时预处理文件,loader是一个node模块,编写loader时要遵循单一原则,每个loader只做一种\\\"转义\\\"工作

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

Webpack重要知识点

为了使用tree shaking,需要满足以下条件:使用ES2015语法(即import和export),在项目package.json文件中,添加sideEffects入口,引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如:UglifyJSPlugin)

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

手把手教你写一个 Webpack Loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。

深入理解Webpack核心模块Tapable钩子[同步版]

tapable是webpack的核心依赖库 想要读懂webpack源码 就必须首先熟悉tapable。ok.下面是webapck中引入的tapable钩子 由此可见 在webpack中tapable的重要性

最全的webpack.base.config.js文件中文注释

引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置,引入config文件夹下index.js,使用打包或开发配置

webpack3 升级 webpack4踩坑记录

安装webpack4最新版本;这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

浅谈webpack优化

由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广