webpack的各个扩展

本文主要介绍了webpack的扩展,包括plugin和loaders的使用。重点讲解了html-webpack-plugin用于自动生成HTML并插入js,favicons-webpack-plugin处理favicon,SourceMapDevToolPlugin和UglifyJsPlugin用于代码压缩,DefinePlugin在React开发中优化体积。同时提到了css和uglify-loader,以及webpack-merge和webpack-validator在模块配置和验证中的应用,最后提到了webpack-dev-server的自动刷新功能。
摘要由CSDN通过智能技术生成

webpack的各个扩展

务必先看的内容
以下的博客内容真不是直接就能看懂的,因为基本只有代码和用处,更详细的描述我主推看building-with-webpack这个网站,下面的内容只是我看前半部分做的笔记,后面的就没有做了,看完后对于webpack的理解会加深很多,特别是基于webpack做的chunk处理,css分离处理,依赖模块与主体js代码的分离处理,一步步教你如何使得打包代码的文件结构分得最细致且有助于浏览器的缓存处理,不过这个有所欠缺的是对于webpack搭配react的使用,webpack-dev-server的部分坑爹的地方也没详述,不过个人认为写react时需要用到webpack还是使用yeoman等自动话构建开发环境的方法会比较方便,webpack的其余内容只需要能看懂,并知道这些代码在起那些作用就好。
ps:(这个网站是全英的哦,也许需要科学上网,建议分2天左右看完吧,一直看也吃不消)

plugin:

html-webpack-plugin :建立一个html模板,自动插入打包的js

//...
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
//...
plugins:[
    new HtmlWebpackPlugin({ title: 'Webpack demo' })
]

favicons-webpack-plugin: 处理favicons

SourceMapDevToolPlugin

 plugins: [
    new webpack.SourceMapDevToolPlugin({
      // Match assets just like for loaders.
      test: string | RegExp
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值