码迷,mamicode.com
首页 > Web开发 > 详细

浅析 -- webpack

时间:2017-08-30 13:07:18      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:bundle   mod   content   替换   hot   编译   目录   目的   分割   

 

1. 一切皆模块

正如js文件可以是一个“模块(module)”一样,其他的(如css、image或html)文件也可视作模 块。因此,你可以require(‘myJSfile.js‘)亦可以require(‘myCSSfile.css‘)。这意味着我们可以将事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的。

2. 按需加载

传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。

webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中.
热模块替换的好处是只替换更新的部分,而不是页面重载.

在命令行中运行inline模式,并启用热模块替换

 

webpack-dev-server --content-base build --inline --hot

注意:命令行模式下,webpack.config.js中一定要配置output.publicPath来指定编译后的包(bundle)的访问位置.

浅析 -- webpack

标签:bundle   mod   content   替换   hot   编译   目录   目的   分割   

原文地址:http://www.cnblogs.com/cara-front-end/p/7452358.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!