你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
whilefor

谈谈webpack和一些常用配置浅析 1个回复 专栏 @ Javascript

whilefor 发布于 1 年前

前言

webpack已经是大部分前端项目打包工具的首选,grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。在grunt、glup、browserify等已经相当火了之后,webpack长江后浪推前浪,把前辈们拍死在沙滩上,实力惊人。

根据GitHub上的迭代发展看来,通过Issues、Release、Commit等看,webpack发展相当不错,已经有2.0的beta版本,最大的更新应该是支持ES6 Modules,根据ES6的特性来做一些Code Splitting等。

wait… 有同学说还有rollup,鉴于他还是小弟,可能还有大部分人都没听说过,官方介绍:A next-generation ES6 module bundler,也是看好他的。

还有brunch,Broccoli等,这里就不列举所有了。

browserify :16年1月出了13.0.0版本,最新版本7月份13.1.0。 browserify-gibhub

grunt :14年6月的版本是v0.4.5,最新版本今年4月份v1.0.1。 grunt-github

gulp :15年6月的版本是v3.9.0,现在的版本是v3.9.1,今年几乎已经没什么更新维护。 gulp-github

webpack : 更新太快,版本太多。。。 主版本16年8月份v1.13.2,并且v2.1.0-beta.22 webpack-github

webpack官方文档结构

webpack的官方文档也是被吐槽的不行。其实当了解了一些webpack之后,发现官方的文档其实分类还是挺清楚的。

GETTING STARTED:简单的介绍了webpack的安装使用,和简单的安装使用Loaders、Plugins、DevTools,没有进阶的东西,入门使用,所以不会很全。

webpack-docs1

TUTORIALS AND EXAMPLES:官方写的入门教程和示例和一个非官方写的入门教程列表。

webpack-docs2

GUIDES:这块对每个功能的介绍就比较的全面了,有功能介绍解释、有步骤、有代码示例、有注释、有对这个功能的API的链接等,是对webpack的进阶了解。

webpack-docs4

WEBPACK WITH:webpack整合这些工具的使用介绍。

webpack-docs5

LIST:这个list其实相当有用,列出了相当多的loaders、plugins,有官方的非官方的,每个都提供链接和一段介绍,并且有按功能分类。

webpack-docs6

API:真正的API文档在这儿,最下面了。一般新手看了前面的可能已经晕了,所以看到API的时候大多都已经没有耐性了。

webpack-docs7webpack-docs8

第一个就是配置的介绍,所有的配置功能都在这儿了。另外还有CLI命令行使用,Node.js API怎样用node调用webpack等等,不过有些介绍可能比较晦涩,需要结合前面的教程、示例等。

其实还是可以再对文档分类整理整理,然后提高下用户体验,这样对刚接触webpack的人找东西可能也就更快了。

webpack常用tips

entry

程序的入口,有多种写法,结合使用。

  • 字符串
entry: './src/app.js'

代表程序只有这一个文件入口文件。如果不使用其他功能插件等,打包出来也就是一个文件,除非是自己做的小玩具,一般不会把所有文件都打包一个。

  • 数组:
entry: ["./entry1", "./entry2"]

把多个文件打包合并成一个。这个使用的场景应该是把polyfills或者一些跟主程序没有直接引用关系的程序打包在一起。

  • 对象:
entry: {
     page1: "./page1",
     page2: ["./entry1", "./entry2"]
}

把前面的二个使用方法结合使用。对象的key是作为打包成的文件的名称,所以有多少个key,就代表打包成多少个文件。

output

output: {
    path: paths.appBuild,
    filename: 'static/js/[name].[chunkhash:8].js',
    publicPath: publicPath
}
  • path:打包后的js文件存放地址。
  • filename:文件名称;如果前面有/开始的,webpack自动帮你生成目录;[name]就是entry中的key,[chunkhash:8]自动帮你加上hash。
  • publicPath:在你网站运行时候可能你访问的资源地址(image,url等)可能不是你打包的目录(path), publicPath 就是在 path 前加上一段;可以是目录,也可以是CDN地址。

插件CommonsChunkPlugin

一般会把jQuery、react、angular等框架或者库打包成一个文件,因为不会经常更改,可以长时间的缓存在用户的浏览器上。

入口和出口:

entry: {
    app: ["./polyfills", "./app"],
    vendor: [
        'react'
        'rect-dom',
        'react-router'
    ]
},
output: {
    filename: 'static/js/[name].[chunkhash:8].js',
    publicPath: publicPath
}

这样打包会把应用打包成 app.jsvendor.js ,乍一看没问题,把第三方的框架或库和自己的代码分开了打包。其实 app.js 中引用了第三方的库框架,导致webpack也打包了 vendor 的代码到 app.js 中。重复打包了。

加上CommonsChunkPlugin,webpack才不会把 vendor 中的代码打包进 app.js 中。

new webpack.optimize.CommonsChunkPlugin({
    name : 'vendor'// also can a array
})

插件ExtractTextPlugin

webpack把css也当成模块,在js中可以import css文件,所以html中不需要手动去加css,当这个js加载时候,会帮你把css包裹在style标签中插入页面。但是这个使用场景也是极少的,你还是需要把css生成文件的。

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
}

虽然是个插件,但是也提供loader, 应该是告诉webpack打包时候不要把它打包进js。

new ExtractTextPlugin('static/css/[name].[contenthash:8].css')

然后会帮你导出到该目录下。

并且可以把一些框架库或公用的css放在 entryvendor中,结合CommonsChunkPlugin插件,webpack会自动你生成 vendor.jsvendor.css

entry: {
    app: ["./polyfills", "./app"],
    vendor: [
         'react',
         'rect-dom',
         'react-router' ,
         'bootstrap/dist/css/bootstrap.css',
          ...
    ]
}

ExtractTextPlugin虽然是叫做Extract Text,命名其实相当准确,因为类似CSS, JSON,或者未引用任何库不需要编译的JS其实就是一段文本,ExtractTextPlugin其实就是把他们导出到一个独立的文件而已。

externals && output.libraryTarget && output.library

  • output.libraryTarget

打包后的文件的格式标准, commonsamdumd 等等,比如你想发布npm包的时候可以指定打包后是什么格式标准。详情请见官方文档(https://webpack.github.io/docs/configuration.html#output-librarytarget)
* output.library

指定使用require时的模块名,示例:require(“query”)。

  • externals

依赖于 output.libraryTarget (默认是 var )。当你想应用的库或框架不在你的目录中,而是通过script标签从外部直接引入的,就可以设置为

output: {
    ...
    libraryTarget: "var"
},
externals: {
    "jquery": "jQuery"
}

externals中value的jQuery其实就是 window.jQuery ;作为key的jquery就是使用时候require的名称 var $ = require("jquery”)

webpack-dev-server

一个npm的包,需要安装。

开发时候你需要运行你的应用,就需要一个server, webpack-dev-server 其实就是封装了 express 的一个server,里面又使用了一个中间件 webpack-dev-middleware 来把webpack编译的文件放在内存中,请求资源时候都是从内存中取,编译过程也是在内存中运行,所以速度非常快。

  • Automatic Refresh&&Hot Module Replacement

自动刷新功能,自动监听更改的文件然后刷新浏览器。

热替换功能,需要增加HotModuleReplacementPlugin,不刷新浏览器,只更新修改过的代码,需要使用的代码模块开启支持 module.hot ,并开启 module.hot.accept() ;

在使用上面功能的时候,需要在entry上加上 config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server"); 可以在webpack.config.js上手动加上,也可以通过node.js调用webpack-dev-server API时候加上去,这样webpack才能和你的浏览连接上。

  • Proxy

可以使接口代理到所需要的地址,这个还是挺使用的,还有不同的功能,详情参见(https://webpack.github.io/docs/webpack-dev-server.html#proxy)

proxy: {
  '/api': {
    target: 'https://other-server.example.com',
    secure: false
  }
}

Conclusion

在使用工具中必定会出现各种问题,一方面在阅读文档的过程中也需要不断的使用google来快速定位到你的问题;在不断的使用过程中才会对你使用的东西有进一步的理解;工具是会变的,我们的思维需要赶超现有工具才能走在前面。

  • alvinlai

    写得不错,值得分享……对webpack初入门比较有用

    #1
登录后回复,如无账号,请使用邀请码注册