webpack生成bundle.js文件为什么那么大，会影响加载速度吗

当然会比较大，因为不光打包了自己开发的JavaScript文件，还把依赖(就是那些第三方的库文件)也都打包进去了，确实会比较大。
webpack的好处有几项
解决依赖关系
多模块化标准支持
多功能插件支持
相比这些在软件工程中急需解决的问题，“大”这个小事儿可以通过其他方式解决。
譬如，
uglify，可以很大程度上压缩源代码，使之体积减小。
或者通过nginx的gzip_comp_level选项可以设置1 ~ 9不同的压缩级别，以降低网络传输压力。
两者混用效果奇佳，而且也是最常见最有效的方式
例如Reactjs的源文件有610k左右，uglify之后已经不到200k了，再通过nginx压缩一把，用户在浏览器下载时，只有40k左右了。
以当今的网络环境，除非自己有精确测试结果，否则真心没必要一开始就考虑什么文件大小的问题，咱们已经不是那个时代了

1 为什么用 webpack
他像 Browserify, 但是将你的应用打包为多个文件 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码 当他么访问到另一个页面, 他们不需要重新下载通用的代码
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包, 还有其他一些
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6) 如果你不知道用什么, 就用 CommonJS
2 Webpack 给 Browserify 的同学用
对应地:
browserify mainjs > bundlejs
webpack mainjs bundlejs
Webpack 比 Browserify 更强大, 你一般会用 webpackconfigjs 来组织各个过程:
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码
3 怎样启动 webpack
切换到有 webpackconfigjs 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for production (minification)
webpack -p 来针对发布环境编译(压缩代码)
webpack --watch 来进行开发过程持续的增量编译(飞快地!)
webpack -d 来生成 SourceMaps
4 JavaScript 方言
Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\coffee$/, loader: 'coffee-loader' },
{ test: /\js$/, loader: 'jsx-loaderharmony' } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolveextensions 参数指明那些文件 Webpack 是要搜索的:
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\coffee$/, loader: 'coffee-loader' },
{ test: /\js$/, loader: 'jsx-loaderharmony' }
]
},
resolve: {
// 现在可以写 require('file') 代替 require('filecoffee')
extensions: ['', 'js', 'json', 'coffee']
}
};
5 样式表和
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require('/bootstrapcss');
require('/myappless');
var img = documentcreateElement('img');
imgsrc = require('/glyphpng');
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀<style>标签 当你引入, Webpack 在包当中插入对应的 URL, 这个 URL 是由require()` 返回的
你需要配置 Webpack(添加 loader):
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
path: '/build', // 和 JS 会到这里来
publicPath: '>不太明白你的意思首次使用Webpack,用CLI,即CommandLineInterface→确认是否安装了NodeJSnpm-v→安装Webpacknpminstallwebpack-g→创建一个简单的网站webpacktest/appjsindexhtml→导航到webpacktest所在文件夹→对appjs文件使用webpackwebpack/appjsbundlejs→我们看到在webpacktest目录下多了一个bundlejs文件→现在，可以在indexhtml中引用bundlejs文件，而不是appjs文件■在项目中添加配置文件→在项目根目录下创建名称为webpackconfigjs文件当设置好webpackconfigjs文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。moduleexports={entry:"/appjs",output:{filename:"bundlejs"}}→命令行来到需要Webpack的网站下→直接输入webpack命令webpack■启用Webpack观察者模式当webpackconfigjs的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，显得相对麻烦一些。Webpack为我们提供了观察者模式，启用后，任何的webpackconfigjs中的变化将接受观察，自动生成最终的js文件。→命令行来到需要Webpack的网站下→启用观察者模式webpack--watch→在webpackconfigjs中添加watch字段，并设置成truemoduleexports={entry:"/appjs",output:{filename:"bundlejs"},watch:true}→这样，每次修改保存webpackconfigjs中引用文件，bundlejs的文件会自动更新。■安装启用WebpackDevServer→导航到目标网站目录→输入npm命令安装WebpackDevServernpminstallwebpack-dev-server-g→输入webpack-dev-server命令webpack-dev-server→看到大致如下内容login');documentwrite("WelcometoBigHairConcerts!!Baby");consolelog('Apploaded');→在浏览器中输入：可以看到变化。→在项目下再添加一个utilsjs文件consolelog('loggingfromtheutilsjsfile');→来到webpackconfigjs下配置如下：moduleexports={entry:["/utils","/appjs"],output:{filename:"bundlejs"},watch:true}→命令行导航到当前项目下→重新启用WebpackDevServerwebpack-dev-server→在中体现了相应的变化

优点: 原生体验, 开发效率很高, 三个月完成最初两个版本, 而且是从零开始, 没有专业的ios人员参与开发, 打好基础后基本上比原生开发要快, 维护成本要低很多 缺点: 开始的时候坑比较多, 文档/组件欠缺, 版本升级快, 开发时需要去读源码,

---