![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack基础
文章平均质量分 50
webpack基础
Python User
这个作者很懒,什么都没留下…
展开
-
webpack优化
webpack优化主要从以下几点:1,webpack抽离css2,压缩css代码 和 js代码3,html压缩(HtmlWebpackPlugin)4,optimization.splitChunks 提取公共代码5,externals分离第三方库 + CDN加速原创 2022-04-19 21:38:12 · 127 阅读 · 0 评论 -
Webpack 生产环境性能优化之externals
前言在实际开发中,我们可能会引入一些第三方库,比如说 elementUI。但是在项目打包的时候,webpack会将main.js 中引入的第三方代码进行打包,为了减小js代码的体积,我们又不希望把它打包进我们的项目中,那么我们应该怎么去做呢?webpack 为我们提供了一个叫做 externals 的配置项,这个配置项可以指定我们想要忽略的第三方库,在打包的时候就不会把这些第三方库打包进来。如果使用了 elementUI 但是又没打包进来,那如何获取这些代码呢?其实我们可以在 html 模版中使用 s原创 2022-04-19 21:36:41 · 505 阅读 · 0 评论 -
webpack抽离 公共代码
webpack在进行抽离公共代码的时候分为两种,一种是公共模块,一种是第三方模块;对于公共模块:不需要重复打包,抽离成一个单独的公共模块文件,然后引用即可;对第三方模块:一般不会轻易改变,所以就单独抽离一个第三方模块的文件,引用即可;一般来讲,这种操作会在生产环境做配置...原创 2022-04-19 21:08:38 · 994 阅读 · 0 评论 -
wbpack配置 生产-开发 环境
在配置开发环境 和 生产环境的时候先了解一下他们的区别:开发环境: 要具有强大的、具有实时重新加载(live reloading)或热模块替换(HMR)能力的 source map 和 devserver proxy。生产环境: 需要做更轻量化的操作,css压缩,打包处理以及更优化的资源,以改善加载时间。如此,我们把公共的配置,放到webpack.base.config.js中,生产环境配置放到webpack.prod.config.js中,开发环境配置放到webpack.dev.config.js中原创 2022-04-19 19:23:32 · 145 阅读 · 0 评论 -
webpack的 拆分配置 和 合并配置
mode表示以什么模式进行打包;使用development模式,打包后的代码可阅读,没被压缩;使用production模式,代码被压缩;const path = require('path');module.exports = { mode:'development', // production 生产环境 entry:{ app: './src/main.js', list: './src/main.js' }, output:{ path.resolve(__dirname,原创 2022-04-19 16:58:53 · 530 阅读 · 1 评论 -
webpack抽离css,压缩css代码 和 js代码
前言在实际生产环境中,较少使用style-loader,css代码被打包到了 main.js里面,这时候就需要对css代码进行抽离优化。module.exports = { module:{ rules:[ test: '/\.css$/', use:[ 'style-loader', // 减少使用 'css-loader', 'postcss-loader' ] ] }}抽离代码,压缩css js使用 mini-css-extract-原创 2022-04-19 16:02:17 · 2996 阅读 · 0 评论 -
webpack中使用devServer实现proxy转发请求 + 启动 HMR 热更新
在遇到无法请求 或跨域的情况下可以使用webpack中devServer的proxy代理转发的功能,实际上中间是做了一层转发,之后再通过本地的localhost:8080返回回来。注意,只能在开发环境做转发,因为他是开发环境下的一个服务器devServer:{ proxy:{ '/api':{ target: 'https://xxxxx.com/', // 我们要代理的真实接口地址 changeOrigin: true, // 允许跨域 pathRewrite: {原创 2022-04-18 23:45:37 · 1590 阅读 · 0 评论 -
webpack中sourceMap的使用
在webpack项目中,有时候打包运行后会出现错误,在浏览器开发者工具却无法准确定位到源代码出错的地方,只有打包代码出错的地方。这个时候可以使用sourceMap工具来做映射,找出源代码出错的地方,SourceMap 的主要作用是为了方便调试module.exports = { mode: 'development', devtool: 'eval-source-map', // devtool: false, // 不想使用的情况下可以使用false}Sourcemap 的种类有很多,原创 2022-04-18 20:03:50 · 773 阅读 · 0 评论 -
webpack常见的loader及其使用
file-loader对小型图片问价进行配置,配置完后再dist生成一串hash值命名的图片。如果想让生成的图片使用原来的名字,就使用[name].[ext] (name表示原始名称,ext表示原始后缀格式),或可以在名称后添加hash。如果想将图片放置在dist的images文件夹下,就使用 outputPath:‘images/’。const path = require('path');module.exports = { entry:{ main: './src/main.js', }原创 2022-04-18 19:51:46 · 529 阅读 · 0 评论 -
webpack入口和出口
什么是入口?入口就是开始打包的地方,例如scr下的main.js文件;什么是多入口?多入口就是允许从多个文件开始打包。举个例子:一个项目中有 user 和 admin 两部分,我们希望将这两部分分别进行打包,就可以使用多入口生成不同的文件。什么是出口?出口就是会根据scr底下的mian.js文件为一个入口,然后把这个打包完的结果输出在这个dist文件夹底下。入口和出口在webpack.config.js下配置。1,单入口const path = require('path');module原创 2022-04-18 15:34:34 · 1168 阅读 · 0 评论 -
Vue 路由的两种模式 history 和 hash,以及命名路由
对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义。前端路由的核心,就在于——改变试图的同时不会向后端发出请求。hash模式: 有 /#/ 号的URL 为hash模式,hash符号之前的内容会被包含在请求中,hash之后的并不会包含于请求中,例如 www.baidu.com/#/name 请求的时候只会请求www.baidu.com;hash模式的工作原理是hashchange事件,可以在window监听hash的变化。我们在u原创 2020-12-27 22:56:49 · 1012 阅读 · 0 评论 -
Vue 路由懒加载和动态加载
什么是路由懒加载?不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间;路由 懒加载 具体的实现:var router = new VueRouter ({ routes:[ { path: '/public', name: 'public', component: () = > { // 使用import 引入 import('./components/t原创 2020-12-27 23:26:58 · 1535 阅读 · 0 评论 -
webpack 中使用vue-router 和 lang scoped属性
在webpack中使用vue-router:1,cnpm i vue-router -S2,在js入口函数中写入:import VueRouter from 'vue-router'/*还需要手动注册安装一下*/Vue.use(VueRouter)3,创建路由的实例对象:// 在 router.js文件中export let routers = new VueRouter({ routes: [ {path:XXX, component: xxxx} ]})4,因为在main原创 2020-11-15 22:13:51 · 165 阅读 · 0 评论 -
webpack中 ES6 的 export 和 export defualt 的使用
export defualt:只能向外暴露一次,且暴露的名称可以不固定,可以import 的时候自定义export :可以向外暴露多个,但接受的的时候必须使用原先的暴露的名称,且必须用 {} 的形式接受,按需导入...原创 2020-11-12 15:10:15 · 325 阅读 · 0 评论 -
在 webpack中 Vue 使用组件模板 .vue
1,在webpack中 使用vue这个组件模板文件来定义组件,所以要安装能解析这种文件的 Loader :cnpm i vue-loader vue-template-compiler -D2,需要在webpack中新增这个vueLoaderPlugin,Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:这个插件是必须的! 它的职责是原创 2020-11-11 23:21:15 · 137 阅读 · 0 评论 -
首次用webpack导入 Vue包时可能出现的问题和解决办法
假如通过CDN的方式script标签引入Vue的包,那么久需要:1,script引入Vue包;2,创建Vue实例 new vue({});3,挂载容器el 或 $mount() 如果通过 webpack来导入Vue的话则需要:1,通过npm 下载 Vue的包:cnpm i vue -S2,在入口函数main.js 处导入 import Vue from ‘vue’3,再进行挂载,运行,但是会出现问题,如下:【原因】:import Vue from ‘vue’ 时导入的vue 不是 真正的原创 2020-11-11 22:16:39 · 203 阅读 · 0 评论 -
webpack处理 ES6 或 ES7 的高级语法
webpack只兼容部分的ES6语法,所以需要用到loader功能的babel将高级语法转化为低级语法1,安装loader:cnpm i babel-core babel-loader babel-plugin-transform-runtime -Dcnpm i babel-preset-env babel-preset-stage-0 -D,2,之后在webpack的配置文件modules节点下的rules数组中添加一个新的匹配规则,如下:3,在项目的根目录下新建一个 .babelrc 的配原创 2020-11-11 17:25:58 · 375 阅读 · 0 评论 -
webpack中的url-loader的使用
默认情况下 webpack 无法处理 css 文件中的 url() 地址, 不管是 图片 还是 字体库下载: cnpm i url-loader file-loader -D如 处理此条路径test 中匹配图片的类型,[hash:8]表示前面自动生成八位哈希的值,确保名称相同内容不相同的两张图片显示出来不一样(各自显示各自);limit是给定的值,是指图片的大小 如果小于这个值 图片的名称就会被转换成base64字符串,否则不会转换成base64字符串;下面的ttf/woff/woff2 等字体原创 2020-11-11 16:19:10 · 266 阅读 · 0 评论 -
webpack中main.js导入js以外文件的处理办法
如果需要在main.js中导入其他非js文件则需要用到 配置文件如导入css/less 文件 : cnpm i style-loader -D, cnpm i css-loader -D, cnpm i less-loader -D,cnpm i less -D原创 2020-11-03 22:55:30 · 520 阅读 · 0 评论 -
webpack-dev-server 安装中出现的问题
webpack-dev-server 依赖于webpack,所以安装的时候对webpack和webpack-cli版本有一定要求1, cnpm i webpack-dev-server -D2, 查看warning提示,指定的webpack版本进行安装 cnpm i webpack@XXXX -D3, 在 webpack.json scripts中添加 scripts:{"dev": "webpack-dev-server"}4, 执行 npm run dev可能出现的错误:解决:1,删除nod原创 2020-11-01 23:02:08 · 655 阅读 · 1 评论 -
webpack的创建
1,新建文件夹:vscode打开 2,用npm管理工具管理起来,在终端输入:npm init -y ---> 产生package.json文件,如果文件夹是中文则输入:npm init 手动在输入中文名称3,创建src目录存放项目,创建dist存放打包后的文件,在src下创建index.html是项目的主页面,创建main.js是项目js的入口文件4,(可省略)查看是可以打包,在main.js中写入代码,在终端下:webpack .\src\main.js .\dist\bundle.js原创 2020-11-03 22:46:18 · 106 阅读 · 0 评论