如何学习 Webpack
2017-06-12 19:14
393 查看
webpack-howto
本教程的目标
这是一本教你如何应用webpack到你的项目中的工具书。它包含了我们在我的建议:这个教程作为你第一个
webpack的文档,学习完以后去看它的官方文档,了解更详细的说明。
学习的前提
你了解过类似browserify、
RequireJS的东西
你知道:
Bundle的拆分
异步的加载
打包images和css的这一类的静态资源
1. 为什么选择 webpack?
它和browserify类似 但是它可以把你的应用拆分成多个文件。如果你的单页应用里有很多页面,用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时,不再需要加载与之前页面重复的通用代码。它可以替代gulp和grunt 因为他可以构建打包css、预处理css、编译js和图片等。
它支持AMD和CommonJS,以及其他的模块系统(Angular, ES6)。如果你不太熟悉如何使用,就用CommonJS吧。
2. 对于习惯Browserify的人可以这样使用Webpack
下面的命令是等价的:browserify main.js > bundle.js
webpack main.js bundle.js
然而,webpack要比Browserify强大。所以一般情况下你需要建立一个
webpack.config.js文件来配置webpack。
// webpack.config.js module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };
这就是单纯的JS,所有写这个配置文件毫无压力。
3. 如何调用webpack
选择一个目录下有webpack.config.js文件的文件夹,然后运行下面的命令:
webpack开发环境下编译
webpack -p产品编译及压缩
webpack --watch开发环境下持续的监听文件变动来进行编译(非常快!)
webpack -d引入 source maps
4. 编译js
webpack可以和browserify、RequireJS一样作为一个loader(加载工具)来使用。下面我们来看下如何使用webpack去加载、编译CoffeeScript和JSX+ES6。(这里你必须先npm install babel-loader coffee-loader):
你也要看下babel-loader的介绍,它会作为一个开发环境下的依赖加载到我们的项目中(run
npm install babel-core babel-preset-es2015 babel-preset-react)
// webpack.config.js module.exports = { entry: './main.js', // 入口文件 output: { filename: 'bundle.js' // 打包输出的文件 }, module: { loaders: [ { test: /\.coffee$/, // test 去判断是否为.coffee的文件,是的话就是进行coffee编译 loader: 'coffee-loader' }, { test: /\.js$/, // test 去判断是否为.js,是的话就是进行es6和jsx的编译 loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } };
如果你希望在require文件时省略文件的扩展名,只需要在webpack.config.js中添加
resolve.extensions来配置。
// webpack.config.js module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.coffee$/, loader: 'coffee-loader' }, { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, resolve: { // 现在你require文件的时候可以直接使用require('file'),不用使用require('file.coffee') extensions: ['', '.js', '.json', '.coffee'] } };
5. Css样式和图片的加载
首先你需要用require()去加载你的静态资源(named as they would with node's
require()):
require('./bootstrap.css'); require('./myapp.less'); var img = document.createElement('img'); img.src = require('./glyph.png');
当你require了CSS(less或者其他)文件,webpack会在页面中插入一个内联的
<style>,去引入样式。当require图片的时候,bundle文件会包含图片的url,并通过
require()返回图片的url。
但是这需要你在
webpack.config.js做相应的配置(这里还是使用loaders)
// webpack.config.js module.exports = { entry: './main.js', output: { path: './build', // 图片和js会放在这 publicPath: 'http://mycdn.com/', // 这里用来生成图片的地址 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的图片地址,图片要小于8k,直接的url的地址则不解析 ] } };
6. 功能标识(Feature flags)
项目中有些代码我们只为在开发环境(例如日志)或者是内部测试环境(例如那些没有发布的新功能)中使用,那就需要引入下面这些魔法全局变量(magic globals):if (__DEV__) { console.warn('Extra logging'); } // ... if (__PRERELEASE__) { showSecretFeature(); }
同时还要在webpack.config.js中配置这些变量,使得webpack能够识别他们。
// webpack.config.js // definePlugin 会把定义的string 变量插入到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会删除所有无作用代码,也就是说那些包裹在这些全局变量下的代码块都会被删除,这样就能保证这些代码不会因发布上线而泄露。
7. 多个入口文件
如果你有两个页面:profile和feed。如果你希望用户访问profile页面时不加载feed页面的代码,那就需要生成多个bundles文件:为每个页面创建自己的“main module”(入口文件)。// webpack.config.js module.exports = { entry: { Profile: './profile.js', Feed: './feed.js' }, output: { path: 'build', filename: '[name].js' // name是基于上边entry中定义的key } };
在profile页面中插入
<script src="build/Profile.js"></script>。feed也一样。
8. 优化通用代码
Feed和Profile页面存在大量通用代码(比如React、公共的样式和组件等等)。webpack可以抽离页面间公共的代码,生成一个公共的bundle文件,供这两个页面缓存使用:// 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' // 为上面entry的key值 }, plugins: [commonsPlugin] };
在上一步引入自己的bundle之前引入
<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 默认会从项目的根目录下引入这些chunk文件。你也可以通过
output.publicPath来配置chunk文件的引入路径
// webpack.config.js output: { path: "/home/proj/public/assets", // webpack的build路径 publicPath: "/assets/" // 你require的路径 }
其他
看一个真实的例子,看看他们是怎么使用webpack。这是Pete Hunt在Instagram.com中谈论webpack的视频。FAQ
webpack 不仅仅是个modular
相比较browserify和browserify,在你的项目中大量的使用webpack插件才能体现出webpack的优势。当使用了插件后,代码才会被复写。其余的都是默认加载。相关文章推荐
- 一步一步学习OCS2007(二)--如何定制web 标签页?
- 如何获取datalist里面子控件(如:dropdownlist)的值[WEB学习示例]
- selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面
- selenium webdriver学习(十五)------------如何处理FirefoxProfile
- selenium webdriver学习(十四)------------如何处理table
- 先学习学习: Fine-Tune Your Web Site for Windows XP Service Pack 2
- 《TomCat与Java Web开发技术详解》(第二版) 第三章节的学习总结--一个WEB应用的目录结构以及如何发布WEB应用
- selenium webdriver学习(八)------------如何操作select下拉框
- selenium webdriver学习(七)------------如何处理alert、confirm、prompt对话框
- java web开发学习-10 netbeans如何导入struts2插件
- 请问如何动态实现播放语音文件[WEB学习示例]
- selenium webdriver学习(十三)------------如何利用Actions类模拟鼠标和键盘的操作
- 如何学习Java Web开发呢?
- selenium webdriver学习(九)------------如何操作cookie
- 如何学习Java Web开发
- 学习 ---AJAX如何用于Web部件
- 如何学习Java Web开发
- selenium webdriver学习(十三)------------如何利用Actions类模拟鼠标和键盘的操作
- selenium webdriver学习(十二)------------如何利用selenium-webdriver截图
- 一起学习水晶报表之【如何实现Web网页显示水晶报表和绑定数据】(课程1)