浅谈Webpack模块打包工具二
Webpack插件机制介绍
Loader专注实现资源模块加载,plugin解决其他自动化工作,比如清除dist目录,拷贝静态文件值输出目录,压缩输出代码等,下面列举几个plugin
的例子。
Webpack自动清除目录插件
Webpack常用插件clean-webpack-plugin 自动清除目录插件
yarn add clean-webpack-plugin --dev
在webpack.config.js中引入模块 const { CleanWebpackPlugin } =require('clean-webpack-plugin'),添加配置plugins:[new CleanWebpackPlugin()]
Webpack自动生成HTML插件
yarn add html-webpack-plugin --dev webpack打包之后自动生成html文件
webpack拷贝目录插件
yarn add copy-webpack-plugin --dev webpack打包之后把未被打包的静态资源打包到指定目录
下面用Webpack开发一个插件
官方规定是一个函数或者是一个包含apply方法的对象,相比较于Loader,Plugin拥有更宽的能力范围plugin通过钩子机制实现,钩子机制
相当于事件,webpack给每一个环节都埋下了一个钩子,开发插件的时候挂载不同的任务,插件的机制是通过在生命周期的钩子中挂载函
数实现拓展,下面用代码尝试去开发下去掉打包文件中js无用注释的插件(webpack.config.js)。
webpack-dev-server
Webpack 集成自动编译,自动刷新浏览器及创建服务等功能,为了提高开发效率并没有将打包结果存入磁盘中,打包结果暂时存放在内
存中,就可以达到一边编码一边预览的功能。
yarn add webpack-dev 1572 -server --dev --open
Dev Server默认只会serve打包输出文件,只要是Webpack输出的文件都可以正常被访问到其他静态资源文件也需要被访问的话需要
额外的告诉webpack dev server,需要添加额外的设置contentBase属性。(如下图所示)
Webpack解决跨域问题(代理API)
我们可以使用跨域资源共享(CORS) 使用CORS的前提是API必须支持,并不是任何情况下API都支持CORS如果同源部署(也就是域名
和端口一致)的话就没必要开启CORS。
webpack dev server支持配置代理服务,也就是说在开发服务器中去配置代理服务,把我们的接口服务代理到接口服务地址,比如说
我们把github api 代理到开发服务器。
- 浅谈Webpack模块打包工具一
- Webpack 4.0.0 正式发布,模块加载打包工具
- 详解webpack模块加载器兼打包工具
- Webpack 4.0.0 正式发布,模块加载打包工具
- 模块打包工具webpack的使用
- webpack 模块加载兼打包工具——入门或进阶
- 【webpack】 模块加载器兼打包工具
- webpack打包工具
- Webpack前端打包工具
- webpack前端模块加载工具
- webpack 模块打包器
- 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
- 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用
- vue 之webpack打包工具的使用
- webpack的使用(3) ----模块加载器以及webpack打包多个包
- webpack中loader加载器(打包非js模块)
- 入门学习webpack打包工具(一)
- webpack打包工具的搭建
- vue——45-webpack打包vue-向模块传递参数( export )
- 浅谈React + Webpack 构建打包优化