webpack+plugin插件机制+weboack dev server工具

webpack自动清除目录插件

项目打包文件dist中只留下项目打包输出文件

yarn add clean-webpack-plugin --dev

const path = require('path')
//导入clean-webpack-plugin插件，需要解构
const {CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = {mode: 'none',entry: './src/main.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist'),publicPath: 'dist/'},module: {rules: [{test: /.md$/,use: ['html-loader','./markdown-loader']}]},plugins:[//依赖new CleanWebpackPlugin()]
}

webpack自动生成HTML文件插件

yarn add html-webpack-plugin

自定义输出html文件内容
1.下载导入html-wepack-plugin文件
2.webpack.config.js配置依赖项：配置生成index.html文件中title,meta等标签；设置模板文件
同时生成多个html文件：依赖配置中定义多个HtmlWebpackPlugin对象

  plugins:[new CleanWebpackPlugin(),//生成index.html文件new HtmlWebpackPlugin({title:'test',//html中title标签meta:{//meta标签viewport:'width=device-width'},template:'./index.html'//模板html文件}),//用于生成指定名称的html文件new HtmlWebpackPlugin({filename:'about.html'})]

webpack打包静态资源插件

用于打包静态资源到指定目录

yarn add copy-webpack-plugin

plugins:[new CleanWebpackPlugin(),//生成index.html文件new HtmlWebpackPlugin({title:'test',meta:{viewport:'width=device-width'}template:'./index.html'}),//用于生成指定名称的html文件new HtmlWebpackPlugin({filename:'about.html'}),//用于打包静态资源：如图片new CopyWebpackPlugin(['public'//指定静态资源打包到public目录])]

模拟开发一个插件

开发一个插件myPlugin，用于删除bunder.js【打包文件】中的*：
webpack.config.js文件中新增类myPlugins,依赖配置中进行配置

class MyPlugin{apply(compiler) =>{console.log('MyPlugin 启动')compiler.hooks.emit.tap('MyPlugin',compilation =>{//compilation可以理解为此次打包的上下文for(comst name in compilation.assets){//console.log(name)console.log(compilation.assets[name].source())if(name.endsWith('.js')){const contents = compilation.assets[name].source()const withoutComments = contents.replace(/\/\*\+\*\//g,'')compilation.assets[name] = {source:()=>withoutComments,size:()=>withoutComments.length} }}})}
}

webpack Dev Server 工具

提供用于开发的http server服务器，集成自动编译和自动刷新浏览器功能。运行webpack-dev-server将打包结果暂时存放到内存中，不生成dist目录；等待http server 服务器读取，发送给浏览器

yarn add webpack-dev-server --dev 安装，
yarn webpack-dev-server 运行
yarn webpack-dev-server --open命令打开浏览器，展示运行结果

webpack Dev Server 打包静态资源

webpack.config.js配置文件中添加devServer配置

devServer:{//配置webpack-dev-server,打包静态资源文件，如图片等contentBase:'./public/'//指定额外资源路径}

webpack Dev Server 代理API

解决开发阶段接口接口跨域问题

devServer:{//配置webpack-dev-server,打包静态资源文件，如图片等contentBase:'./public',//指定额外资源路径proxy:{'/api':{//http://localhost:8080/api/users -> https://api.github.com/api/userstarget:'https://api.github.com',pathRewrite:{'^/api':''},changeOrigin:true}}}

webpack+plugin插件机制+weboack dev server工具相关推荐

解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
如何使用MyBatis的plugin插件实现多租户的数据过滤？
如何实现多租户数据隔离在中台服务或者saas服务中,当多租户入驻时,如何保证不同租户的数据隔离性呢?通常的解决方法有三种,分别如下: 一个租户一个独立数据库,这种方案的用户数据隔离级别最高,安全性最 ...
webpack插件机制
webpack插件机制是整个webpack工具的核心,那么webpack插件有什么特点呢? 1.独立的JS模块,暴露相应的函数 2.函数原型上的apply方法会注入compiler对象(之所以要定义a ...
探寻 webpack 插件机制
webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...
iOS之深入解析CocoaPods的插件机制和如何加载插件整合开发工具
一.CocoaPods 插件机制 ① Ruby 在 Ruby 中,类永远是开放的,总是可以将新的方法加入到已有的类中,除了自己的代码中,还可以用在标准库和内置类中,这个特性被称为 Ruby Open ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
docker用gpu的参数_从零开始入门 K8s | GPU 管理和 Device Plugin 工作机制
导读:2016 年,随着 AlphaGo 的走红和 TensorFlow 项目的异军突起,一场名为 AI 的技术革命迅速从学术圈蔓延到了工业界,所谓 AI 革命从此拉开了帷幕.该热潮的背后推手正是云计 ...
第 20 课时：GPU 管理和 Device Plugin 工作机制（车漾）
本文将主要分享以下几个方面的内容: 需求来源 GPU 的容器化 Kubernetes 的 GPU 管理工作原理课后思考与实践需求来源 2016 年,随着 AlphaGo 的走红和 TensorF ...
从零开始入门 K8s | GPU 管理和 Device Plugin 工作机制
作者 | 车漾阿里巴巴高级技术专家本文整理自<CNCF x Alibaba 云原生技术公开课>第 20 讲. 关注"阿里巴巴云原生"公众号,回复关键词**" ...
mixin机制 vue_读?VuePress（四）插件机制
前言从 9 月份开始,vuepress 源码进行了重新设计和拆分.先是开了个 next 分支,后来又合并到 master 分支,为即将发布的 1.x 版本做准备. 最主要的变化是:大部分的全局功能都 ...