webpack中是什么意思？有什么用？如何用
webpack\u4e2d\u662f\u4ec0\u4e48\u610f\u601d\uff1f\u6709\u4ec0\u4e48\u7528\uff1f\u5982\u4f55\u75281. \u4e3a\u4ec0\u4e48\u7528 webpack?
\u4ed6\u50cf Browserify, \u4f46\u662f\u5c06\u4f60\u7684\u5e94\u7528\u6253\u5305\u4e3a\u591a\u4e2a\u6587\u4ef6. \u5982\u679c\u4f60\u7684\u5355\u9875\u9762\u5e94\u7528\u6709\u591a\u4e2a\u9875\u9762, \u90a3\u4e48\u7528\u6237\u53ea\u4ece\u4e0b\u8f7d\u5bf9\u5e94\u9875\u9762\u7684\u4ee3\u7801. \u5f53\u4ed6\u4e48\u8bbf\u95ee\u5230\u53e6\u4e00\u4e2a\u9875\u9762, \u4ed6\u4eec\u4e0d\u9700\u8981\u91cd\u65b0\u4e0b\u8f7d\u901a\u7528\u7684\u4ee3\u7801.
\u4ed6\u5728\u5f88\u591a\u5730\u65b9\u80fd\u66ff\u4ee3 Grunt \u8ddf Gulp \u56e0\u4e3a\u4ed6\u80fd\u591f\u7f16\u8bd1\u6253\u5305 CSS, \u505a CSS \u9884\u5904\u7406, \u7f16\u8bd1 JS \u65b9\u8a00, \u6253\u5305\u56fe\u7247, \u8fd8\u6709\u5176\u4ed6\u4e00\u4e9b.
\u5b83\u652f\u6301 AMD \u8ddf CommonJS, \u4ee5\u53ca\u5176\u4ed6\u4e00\u4e9b\u6a21\u5757\u7cfb\u7edf, (Angular, ES6). \u5982\u679c\u4f60\u4e0d\u77e5\u9053\u7528\u4ec0\u4e48, \u5c31\u7528 CommonJS.
2. Webpack \u7ed9 Browserify \u7684\u540c\u5b66\u7528
\u5bf9\u5e94\u5730:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack \u6bd4 Browserify \u66f4\u5f3a\u5927, \u4f60\u4e00\u822c\u4f1a\u7528 webpack.config.js \u6765\u7ec4\u7ec7\u5404\u4e2a\u8fc7\u7a0b:
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
\u8fd9\u662f Webpack \u600e\u4e48\u505a\u4e8b\u60c5\u7684\u70f9\u996a\u4e66. \u5176\u4e2d\u5305\u542b\u4e86\u6211\u4eec\u5728 Instagram \u505a\u7684\u5927\u90e8\u5206\u529f\u80fd, \u800c\u4e14\u90fd\u662f\u5728\u7528\u7684\u529f\u80fd.
1. 为什么用 webpack?他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.
2. Webpack 给 Browserify 的同学用
对应地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码.
3. 怎样启动 webpack
切换到有 webpack.config.js 的目录然后运行:
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):
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 现在可以写 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
5. 样式表和图片
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀<style>标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
path: './build', // 图片和 JS 会到这里来
publicPath: 'http://mycdn.com/', // 这个用来成成比如图片的 URL
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 来连接多个人 loader
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
]
}
};
6. 功能开关
有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然后配置 Webpack 当中的对应全局变量:
// webpack.config.js
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.
7. 多个进入点(entrypoints)
比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 "main module":
// webpack.config.js
module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // 模版基于上边 entry 的 key
}
};
针对 profile, 在页面当中插入 <script src="build/Profile.js"></script>. feed 页面也是一样.
8. 优化共用代码
feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
};
在上一个步骤的 script 标签前面加上 <script src="build/common.js"></script> 你就能得到廉价的缓存了.
9. 异步加载
CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.
声明你想要异步加载的那个"分界点". 比如:
if (window.location.pathname === '/feed') {
showLoadingState();
require.ensure([], function() { // 语法奇葩, 但是有用
hideLoadingState();
require('./feed').show(); // 函数调用后, 模块保证在同步请求下可用
});
} else if (window.location.pathname === '/profile') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./profile').show();
});
}
Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.
Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.
// webpack.config.js
output: {
path: "/home/proj/public/assets", // path 指向 Webpack 编译能的资源位置
publicPath: "/assets/" // 引用你的文件时考虑使用的地址
绛旓細webpack --watch 鏉ヨ繘琛屽紑鍙戣繃绋嬫寔缁殑澧為噺缂栬瘧(椋炲揩鍦!)webpack -d 鏉ョ敓鎴 SourceMaps 4. JavaScript 鏂硅█ Webpack 瀵瑰簲 Browsserify transform 鍜 RequireJS 鎻掍欢鐨勫伐鍏风О涓 loader. 涓嬭竟鏄 Webpack 鍔犺浇 CoffeeScript 鍜 Facebook JSX-ES6 鐨勯厤缃(浣犻渶瑕 npm install jsx-loader coffee-loader):...
绛旓細webpack鏄繎鏈熸渶鐏殑涓娆炬ā鍧楀姞杞藉櫒鍏兼墦鍖呭伐鍏锛屽畠鑳芥妸鍚勭璧勬簮锛屼緥濡侸S锛堝惈JSX锛夈乧offee銆佹牱寮忥紙鍚玪ess/sass锛夈佸浘鐗囩瓑閮戒綔涓烘ā鍧楁潵浣跨敤鍜屽鐞嗐傛垜浠彲浠ョ洿鎺ヤ娇鐢 require(XXX) 鐨勫舰寮忔潵寮曞叆鍚勬ā鍧楋紝鍗充娇瀹冧滑鍙兘闇瑕佺粡杩囩紪璇戯紙姣斿JSX鍜宻ass锛夛紝浣嗘垜浠棤椤诲湪涓婇潰鑺辫垂澶蹇冩濓紝鍥犱负 webpack 鏈夌潃鍚勭鍋...
绛旓細webpack鎵撳寘閫熷害璺熺數鑴戝唴瀛樻湁鍏銆俉ebpack鏄竴涓敤浜庢墦鍖呭拰鏋勫缓JavaScript搴旂敤绋嬪簭鐨勫伐鍏凤紝瀹冧細灏嗗涓ā鍧楀拰璧勬簮鎵撳寘鎴愪竴涓垨澶氫釜杈撳嚭鏂囦欢銆傚湪鎵撳寘杩囩▼涓紝Webpack闇瑕佸姞杞藉拰澶勭悊澶ч噺鐨勪唬鐮佸拰渚濊禆椤癸紝鍥犳浼氬崰鐢ㄨ绠楁満鐨勫唴瀛樸
绛旓細鍙互鏄湪import鎴栬呭姞杞芥ā鍧楁椂涓庡鐞嗘枃浠 涔熷氨鏄被浼间簬鍏朵粬鏋勪欢宸ュ叿涓滀换鍔♀ 骞朵笖鎻愪緵浜嗗墠绔瀯寤烘楠ょ殑寮哄ぇ鏂规硶銆侺oader涓湁涓や釜鐩爣 涓鏄瘑鍒腑琚搴旂殑loader杩涜杞崲鐨勯偅浜涙枃浠 浜屾槸杞崲杩欎簺鏂囦欢 浣垮叾鑳藉琚坊鍔犲埌渚濊禆鍥句腑銆4.cha浠 cha浠舵槸webpack鐨勬敮鏌卞姛鑳 webpack鑷韩涔熸槸鏋勫缓涓巆ha浠剁郴缁...
绛旓細vue鏄竴绉峧s妗嗘灦锛wepack鏄墦鍖呭伐鍏锛宯odejs涔熸槸js鍚庡彴妗嗘灦锛屼笁鑰呭氨鐩稿綋浜庢槸琛ㄥ厔寮燂紝琛ㄥ厔濡圭殑鍏崇郴锛屾病鏈夌洿绯讳翰灞炵殑鍏崇郴銆
绛旓細鍏朵腑锛孊ootCDN鏄疊ootstrap涓枃缃戞敮鎸佸拰缁存姢鐨勫墠绔紑婧愰」鐩厤璐笴DN鏈嶅姟锛岄」鐩祫婧愪笌cdnjs浠撳簱鍚屾銆傜晫闈㈡瘮杈冪編瑙傦紝鏀寔鎼滅储鍔熻兘锛屽彲浠ュ湪绾挎祴璇昪dn鏄惁姝ｅ父锛屼笅闈互Bootcdn涓轰緥銆傚湪浠ュ墠鐨勯」鐩紑鍙戜腑锛屾垜浠粡甯镐娇鐢╳ebpack鏉ユ瀯寤洪」鐩紝瀹冩湁涓や釜涓昏鍔熻兘锛屽嵆 webpack涓cdn鐨勪娇鐢ㄦ槸鍦ㄩ潤鎬佽祫婧愭墦鍖呯敓鎴愮殑鏃跺欏畬鎴愮殑銆
绛旓細1銆佸鏋滄病鏈 babel锛 webpack 瀵 ES2015+ 鐨勮娉曟槸涓嶆帴鍙楃殑锛屼細鎻愮ず鐢ㄦ寚瀹 loader 杩欐剰鍛崇潃锛屽湪鏀寔閮ㄥ垎 ES2015 璇硶鐨 firefox 涓 chrome 娴忚鍣ㄤ腑鑳界洿鎺ヨ窇鐨勪唬鐮侊紝鏃犳硶鐢 webpack 缂栬瘧銆2銆佸洜涓 webpack 鏄潤鎬佺紪璇戯紝闇瑕佸湪鎵撳寘鏃跺氨鎵弿鍒版墍鏈夊彲鑳界殑妯″潡锛屾墍浠ユ兂鐢 require(expression) 鍦ㄨ繍琛屾椂...
绛旓細Webpack鏄鐜颁唬JavaScript搴旂敤绋嬪簭鐨勬ā鍧楁墦鍖呯▼搴忥紝瀹冨皢鍓嶇寮鍙戞墍闇鐨勬墍鏈夎祫婧愶紙濡侸avaScript銆佸瓧浣撳拰鍥惧儚锛夐泦涓埌涓涓湴鏂广傚鏋滀綘姝ｅ湪寮鍙戝鏉傜殑鍓嶇锛岃繖鐗瑰埆鏈夌敤銆備綘鍙互鍘婚氳繃閮ㄧ讲鍏锋湁鐨WebPackWeb搴旂敤绋嬪簭锛屼互鑾峰彇鏈夊叧鐨刉ebPack璧锋潵鍜岃繍琛屻傞櫎浜嗕互涓婂伐鍏凤紝杩樻湁Sass銆丷eact绛夛紝鏍规嵁浼佷笟鎵鐢ㄥ伐鍏风殑涓嶅悓锛屼綘...
绛旓細webpack鐜版湁鐨勬噿鍔犺浇鎵嬫涓嶅畬缇庯紝浣嗘槸鍩烘湰澶熺敤锛屼富瑕佹槸瀹冪洿鎺ユ敮鎸乧ommonjs瑙勮寖鐨剅equire璇硶锛屽啀閰嶇疆babel绛夎繕鍙互鐩存帴瑙ｆ瀽ES6璇硶锛堝綋鐒讹紝fis涔熷彲浠ラ氳繃鎻掍欢鏀寔ES6鐨勶級锛屽姞涓婂彲浠ョ洿鎺ヤ娇鐢╪pm妯″潡杩欎竴鐐癸紝渚濇墭npm绀惧尯寮哄ぇ绾㈠埄鏉ユ惌寤哄叕鍙哥骇鍏叡缁勪欢鍖栬鑼冦傛墍浠ョ患鍚堣冭檻锛寃ebpack鐩墠鏄墠绔瀯寤哄伐鍏风殑棣栭夈
绛旓細webpack鐗堟湰鍐茬獊銆傚湪webpack-v涓紝鐢变簬webpack鐗堟湰鍐茬獊鐨勫師鍥狅紝鎵浠ヤ細鏄惧緱娌℃湁寮瑰嚭鐗堟湰濂姐webpack鏄浠ｇ爜缂栬瘧宸ュ叿锛屾湁鍏ュ彛銆佸嚭鍙ｃ乴oader鍜屾彃浠躲
