本文共 7936 字,大约阅读时间需要 26 分钟。
http://jafeney.com/2016/02/02/2016-02-02-webpack/模块化构建会让项目的拓展性、代码复用性和可维护性大大提高,初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的,一个良好的模块化方案会让维护工作变得轻松,这个好处项目越进展到后来越明显。而且模块化构建的框架和工具很多,RequireJS
、SeaJS
、Grunt
、Gulp
等,这些虽然成熟稳定但并不是我们今天的主题,既然是采用react
开发webApp,那么模块化当然是选webpack
。
1、支持CommonJs和AMD模块,意思也就是我们基本可以无痛迁移旧项目
2、支持模块加载器和插件机制,可对模块灵活定制。babel-loader更是有效支持ES6。
3、可以通过配置,打包成多个文件。有效利用浏览器的缓存功能提升性能。
4、将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器,可以支持sass,less等CSS预处理器。
5、内置有source map,即使打包在一起依旧方便调试。
首先介绍webpack
的配置文件webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var webpack=require('webpack'); module.exports={ entry:[ 'webpack/hot/onlu-dev-server', './js/app.js' ], output:{ path:'./build', filename:'bundle.js' }, module:{ leaders:[ {test:/\.js?$/,leaders:['react-hot','babel'],exclude:/node_modules/}, {test:/\.js$/,exclude:/node_modules/,loader:/'babel-loader'}, {test:/\.css$/,loader:'style!css'}, {test:/\.less/,loader:'style-loader!css-loader!less-loader'} ], }, resolve:{ extensions:['','.js','.json'] }, plugins:[ new webpack.NoErrorsPlugin() ] } |
webpack.config.js
文件通常放在项目的根目录里,它本身也是一个标准的Common.js
规范的模块。在导出的配置对象中有几个关键的参数:
entry
可以说个字符串或数组或者是对象。当entry
是个字符串的时候用来定义入口文件。
1 | entry:'./js/main.js' |
当entry
是个数组的时候,里面同样包含入口文件,另外一个参数可以用来配置webpack
提供的一个静态资源服务器如webpack-dev-server
,它会监控项目中每一个文件的变化,实时进行构建,并且自动刷新页面,
1 2 3 4 | entry:[ 'webpack/hot/only-dev-server', './js/app.js' ] |
当entry
是一个对象的时候,我们可以将不同的文件构建成不同的文件,按需使用,比如:
1 2 3 4 | entry:{ hello:'./js/hello.js', form:'./js/form.js' } |
output
是个对象,用户定义构建后的文件的输出。其中包含path
和filename
:
1 2 3 4 | output:{ path:'./build', filename:'bundle.js' } |
当我们在entry
中定义构建多个文件时,filename
可以对应地更改为[name].bundle.js
。
关于模块的加载相关,我们就定义在module.loaders
中,这里通过正则表达式去匹配不同后缀的文件名。然后它们定义不同的加载器,比如说给less文件定义三个串联的加载器(用!
连接)
1 2 3 4 5 6 7 8 | moudle:{ loaders:[ {test:/\.js?$/,loaders:['react-hot','babel'],exclude:/node_modules/}, {test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'}, {test:/\.css$/,loader:'style!css'}, {test:/\.less$/,loader:'style-loader!css-loader!less-loader'} ] } |
除此之外,我们还可以用来定义 png
、jpg
这样的图片资源在小于10k时自动处理为base64图片的加载器。
1 | {test:/\.(png|jpg)$/,loader:'url-loader?limit=10000'} |
给css
和less
还有图片添加了loader
之后,我们不仅可以像在node
中那样require
进来了。就像这样:
1 2 3 4 | require('./bootstrap.css'); require('./myapp.less'); var img=document.createElement('img'); img.src=require('./glyph.png'); |
注意: 这样
require
进来的文件会内联到[name].bundle.js
中。如果我们需要把保留require
写法又想把css
文件单独拿出来,可以使用extract-text-webpack-plugin
插件。
1 $ npm install extract-text-webpack-plugin --save-dev
1 2 3 4 5 6 | var ExtractTextPlugin =require('extract-text-webpack-plugin'); module.exports={ plugins:[ new ExtractTextPlugin("[name].css"); ] } |
在上面的示例代码中配置的第一个loader
是react-hot
的加载器,它可以实现react
组件的热替换,我们已经在entry
参数中配置了webpack/hot/only-dev-server
,所以我们只要启动 webpack
时开启-hot
参数既可以使用react-hot-loader
了,在package.json
中这样定义:
1 2 3 4 | "script":{ "start":"webpack-dev-server --hot --progress --colors", "build":"webpack --progress --colors" } |
webpack
在构建包的时候会按目录的文件进行查找,resolve
属性中的extensions
数组中用于配置程序可有自动替换哪些文件的后缀,比如:
1 2 3 | resolve:{ extensions:['','.js','.json'] } |
然后我们想要加载一个js
文件时,只要require('common')
就可以加载common.js
文件了。
webpack
提供了丰富的组件来满足不同的需求,当然如果你足够牛也可以自己编写插件。这里介绍比较常用的NoErrorsPlugin
,它能跳过编译时出错的代码并记录,是编译后运行的包不会发生错误。
1 2 3 | plugins:[ new webpack.NoErrorsPlugin() ] |
当我们想在项目中require
一些其他的类库或者API,而又不想让这些类库的源码构建到运行时的文件中,就可以通过配置externals
参数来解决这个问题,比如jQuery类库
1 2 3 | externals:{ "jquery":'jQuery' } |
这样我们就可以放心在项目中使用这些API了
1 | var jQuery=require('jquery'); |
当我们在require一个模块的时候,如果require
中包含变量,想这样:
1 | require("./mods/"+name+".js"); |
那么在编译的时候是不能知道具体的模块的。但这个时候webpack
也会帮我们分析:
'./mods'
;/^.*\.js$/
;webpack
进行编译,我们可以给它指明路径,像在cake-webpack-config
中所做的那样: 1 2 | var currentBase=progress.cwd(); var context=abcOptions.options.context?abcOptions.options.context:path.isAbsolute(entryDir)?enentryDir:path.join(currentBase,entryDir); |
webpack
与gulp
并不矛盾,甚至一起使用会得到最大化的效益。大致的思路是这样:
使用webpack
进行assets
编译,使用gulp
的流快速对其他资源进行打包。
webpack
的定位是module bundler
,作为模块化工具,它的竞争对手其实是browserify
,而不是gulp
。
webpack 提供了一些非常使用的功能,像我们之前用到的那些,如图片的处理、resolve
的处理、分开构建等,配置相当简单。gulp
想要使用这些功能的时候我们可以在webpack
里先配置好,做到强强联手!
@参考
@参考
@我的技术博客