webpack

28. 十一月 2016 JavaScript 0

详细的webpack介绍什么的,在这里就不说了,直接写它能做什么以及如何去做!

常用的功能有:

代码压缩:

  • html压缩 (使用HtmlWebpackPlugin插件)

HtmlWebpackPlugin插件在生成HTML调用了 html-minifier 插件来完成对HTML的压缩,这里我们使用两个配置完成来移除HTML中的注释以及空白符达到压缩的效果,其他的具体的配置参数大家请参考 html-minifier API

  • js、css 压缩(内置插件)

webpack 已经已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆,无需引用额外的插件。但是需要排除一下可能的关键字,比如说$什么的。

web服务器

安装包 webpack-dev-server

功能:建立web服务器、修改自动刷新

注意webpack-dev-server是把所有资源存储在内存的,所以你会发现在本地没有生成对应的chunk访问却正常。

解析和加载less、scss、ejs、jsx、css、js、image等

Webpack将所有静态资源都认为是模块,比如JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等等,从而可以对其进行统一管理,Webpack的加载器之间可以进行串联,一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,从而运行时可以通过style标签将其应用到最终的浏览器环境。

图片资源的loader配置:图片资源在加载时先压缩,然后当内容size小于~10KB时,会自动转成base64的方式内嵌进去,这样可以减少一个HTTP的请求。当图片大于10KB时,则会在img/下生成压缩后的图片,命名是[hash:8].[name].[ext]的形式。hash:8的意思是取图片内容hashsum值的前8位,这样做能够保证引用的是图片资源的最新修改版本,保证浏览器端能够即时更新。

对于css文件,默认情况下webpack会把css content内嵌到js里边,运行时会使用style标签内联。如果希望将css使用link标签引入,可以使用ExtractTextPlugin插件进行提取。

使用ExtractTextPlugin插件可以将特定的文本提取到一个文件中。比如说将css不以内联的方式写入页面,而是独立成一个文件。

按需加载

使用require.ensure()作为代码分割的标识。

 

资源路径切换(部署开发环境和生产环境)

因为入口文件是手动使用script引入的,在webpack编译之后入口文件的名称和路径一般会改变,即开发环境和生产环境引用的路径不同:

webpack提供了HtmlWebpackPlugin插件来解决这个问题,HtmlWebpackPlugin支持从模板生成html文件,生成的html里边可以正确解决js打包之后的路径、文件名问题,配置示例:

这里资源根路径的配置在output项:

 

以下是一个相对全面的配置,因项目需求不同可以在此基础上增删

同时package.json文件中

增加命令以区分环境

 


发表评论

电子邮件地址不会被公开。