webpack1手记

日期:2016-11-11 19:54 | 标签: | 阅读:688

最近有个项目需要用到 webpack,在这里记录一些难点与一些概念性的知识。

webpack 其实和 grunt/gulp 根本不是一种东西, 它不是一个构建工具,而是 module bundler,webpack 就是根据 module 文件间的依赖将所有 module 打包(bundle)起来。 其有点是使用 loader 的概念让配置更加容易,再也不用和一堆文件路径打交道了。

配置

webpack 的配置可以说就是 module 和 plugins 的配置,module 里主要就是配置各种 loaders, 没啥可说的,你要 require 什么类型的文件就去搜相应的 loader 就好, 这一节主要说后面的这个:plugins 的配置。webpack 支持非常多的插件,详见官方插件列表。

暴露 jQuery

当webpack碰到require的第三方库中出现全局的$、jQeury和window.jQuery时,就会使用node_module下jquery包export出来的东西了。

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

这种方法还是会有弊端,比如无法引入 jquery-plugin ,参考: http://blog.csdn.net/yiifaa/article/details/51916560

定义全局标识

在命令行传参可以指定是时开发还是发布,

// 依赖yargs
args = require('yargs').argv;
new webpack.DefinePlugin({
    __PROD__: args.prod,
    __MOCK__: args.mock
}),

这样在 build 时传入 --prod,则变量 PROD 即为 true ,传入 --mock 则 MOCK 为 true。 在 JS 代码中就可以使用类似的判断 if (PROD) {...} 了。

输出单独的JS

可以使用 webpack 内置的 CommonsChunkPlugin,

entry: {
    app: [
        'source/app/index.js'
    ],
    vendor: [
        'angular',
        'angular-ui-router',
        'angular-animate'
        // ...
    ]
}
new webpack.optimize.CommonsChunkPlugin('vendor', isProd ? 'vendor.[hash].js' : 'vendor.js')

这样,所有模块中只要有require到vendor数组中定义的这些第三方模块, 那么这些第三方模块都会被统一提取出来,放入vendor.js中去。 在插件的配置中我们还进行了判断,如果是生产环境则给最终生成的文件名加hash。

一些有用的工具

优化

实践

使用记录

参考

http://pinkyjie.com/2016/03/05/webpack-tips/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式