webpack 打包问题
const HtmlWebpackPlugin = require('html-webpack-plugin')const webpack = require('webpack');const path = require('path')module.exports = {mode: 'development',entry: './src/index.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundile.js'},modu...
2024-01-10
webpack打包组件库问题
打包的组件库就一个js,引用会报错ReferenceError: exports is not defined其中webpack主要代码是 webpackConfig.module .rule('js') .test(/\.([jt])s$/) .exclude.add(/node_modules/) .end() .use('babel-loader')...
2024-02-22
webpack 打包图片的问题
webpack配置文件const path=require("path");module.exports={ entry:"./src/main.js", output:{ path:path.resolve(__dirname,"./build"), filename:"bundle.js" }, module:{ ...
2024-03-09
揭秘webpack插件的工作原理
webpack系列1：常见 loader 源码简析，以及动手实现一个 md2html-loaderwebpack系列2：揭秘webpack 插件工作原理webpack系列3：webpack 主流程源码阅读以及实现一个 webpack前言通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。本文...
2024-01-10
浅谈webpack组织模块的原理
现在前端用Webpack打包JS和其它文件已经是主流了，加上Node的流行，使得前端的工程方式和后端越来越像。所有的东西都模块化，最后统一编译。Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项，在使用中出现一些迷之错误常常让人无所适从。所以了解一下Webpack究竟是怎么组织编译模块的，...
2024-01-10
【Vue】webpack 打包时报错
这是我的配置if (config.build.productionGzip) {const CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.product...
2024-01-10webpack打包非模块化js的方法
本文主要记录了非模块化js如何使用webpack打包模块化打包实现方式webpack是模块打包工具，通过入口文件递归遍历其依赖图谱，绝对是打包神器。bar.jsexport default function bar() { //}foo.jsimport bar from './bar';bar();通过如下，webpack配置很快实现打包。通过插件我们还可以实现文件压缩，开发态我们还...
2024-01-10
webapck打包之后里面会带箭头函数
用webpack打包之后里面会有箭头函数，导致在ie里面用不了webpack配置babel配置package.json不知道是什么原因回答{ "presets": [ ["env", { "targets": { "browsers": [ "> 1%", "last 2 versions", "Android >= 3.2", "Firefox >= 20", ...
2024-01-10webpack分离css单独打包的方法
本文介绍了webpack分离css单独打包的方法，分享给大家，具体如下：CHANGELOG2018-02-08 14:46:06刚看了下，网上查了 webpack单独打包css，找到的文章，本文比较靠前，但是由于写的比较混乱，因此重新整理一下内容，更通俗易懂一点。2018-02-01 14:45:23由于这篇文章只写了如何把CSS打包成一个CSS文件，没有讲...
2024-01-10webpack自动打包和热更新的实现方法
webpack常用配置webpack dev server功能：自动打包文件配置dev server：在webpack.config.client.js中配置 const path = require('path'); const HTMlPlugin = require('html-webpack-plugin'); // 判断是否是开发环境 const isDev = process.env.NODE_ENV === 'development' const config = { ...
2024-01-10
Xtrabackup工作原理
目录1.Xtrabackup介绍2.Xtrabackup备份涉及的数据库名词2.1.MySQL数据文件扩展名知识说明2.2.事务型引擎的ACID特性2.3.InnoDB引擎内部知识概念2.4.InnoDB引擎内部知识及说明2.5.InnoDB备份相关名词3.Xtrabackup备份的工作原理3.1.Xtrabackup恢复的工作原理3.2.Xtrabackup执行全备份的原理3.3.Xtrabackup执行全备份恢复的过程3.4.Xtraba...
2024-01-10
webpack打包的时候怎么获取命令行的参数？
如图，我这里加了个 aaa=22，怎么拿到aaa的值？回答：可以使用这个代码来获取参数process.argv回答：process.env.aaa回答：来自 http://nodejs.cn/learn/nodejs...回答：$ yarn add minimistrequire("minimist")(process.argv.slice(2))...
2024-03-08webpack 打包压缩js和css的方法示例
打包压缩js与css由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件,其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS。uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用开发分支。...
2024-01-10
vue-cli@webpack@4打包分析命令
一、命令npm run build --report该命令在打包完之后，可以分析包的大小（如下图），从而分析那一块打包太大了可以进行优化处理。...
2024-01-10
webpack项目如何正确打包引入的自定义字体
一. 如何在Vue或React项目中使用自定义字体在开发前端项目时，经常会遇到UI同事希望在项目中使用一个炫酷字体的需求。那么怎么在项目中使用自定义字体呢？其实实现起来并不复杂，可以借用CSS3 @font-face 来实现。本文着重介绍一下 webpack 项目如何正确打包引入的自定义字体。可以访问 这里 查看...
2024-01-10vue和webpack打包项目相对路径修改的方法
一般vue使用webpack打包是整个工程的根目录，但是很多情况下都是把vue打包后的文件在某子目录下。修改：1，打开index.jsassetsPublicPath:'/'改为：assetsPublicPath: './'2.解决css里面的路径问题，打开utils.js添加红色框参数即可；publicPath: '../../'...
2024-01-10
【vue】饿了么项目-使用webpack打包项目
1.vue cli给我们提供了npm run build命令打包项目，在packa.json文件中scripts对象中有build属性，当我们执行npm run build时，就执行build对应的"node build/build.js"脚本build完成后显示进入项目文件夹，找到dist文件夹，这些是打包后产生的文件2.webpack打包过程中会将css和js文件单独提取出来，且会根据path存放进相应...
2024-01-10
vue+webpack项目打包后背景图片加载不出来
在做VUE +的WebPack脚手架项目打包完成后，在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中，背景图片引用的路径问题;后来通过修改配置文件，问题终于解决了，解决方法如下：1.修改资源路径在VUE +的WebPack项目中，项目打包后的CSS和JS的引用路径是绝对路径，项...
2024-01-10webpack开发环境和生产环境的深入理解
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享一下。如何区分开发环境和生产环境？众所周知，webpack时基于node.js平台运行的...
2024-01-10
基于vue-cli的webpack打包优化实践及探索
webpack打包工具成为了前端开发中必备工具，曾经一度的面试题都是问，请问前端页面优化的方式有哪些？大家也是能够信手拈来的说出缓存、压缩文件、css雪碧图以及部署CDN等等各种方法，但是今天不一样了，可能你去面试问的就是，请问你是否知道webpack的打包原理，webpack的打包优化方法有哪些？所...
2024-01-10
【Web前端问题】webpack打包后图片路径有问题
主页本来是在 http：// localhost:8080端口打开的，一切正常，webpack之后，主页直接引用bundle.js，这时主页的图片就找不到了。项目文件结构 和webpack配置如图回答：试试把publicPath："/dist/"改成publicPath：""...
2024-01-10浅谈webpack打包过程中因为图片的路径导致的问题
最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示：然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下:也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置:在这...
2024-01-10
webpack打包React项目后出现中文乱码的问题
问题：React项目用webpack打包后，部署到服务器上，然后直接访问打包后的index.html文件，出现了中文乱码问题。解决方法：在webpack打包时，使用 webpack-encoding-plugin 插件就可以解决。操作步骤如下：第一步 安装webpack-encoding-plugin插件cnpm i webpack-encoding-plugin -D第二步 配置webpack.config.js文件在webpack.confi...
2024-01-10
总结Vue第三天：模块化和webpack模块化打包：
总结Vue第三天：模块化和webpack模块化打包：一、❀ 模块化 [导入import-----导出export]1、为什么需要模块化？JavaScript 发展初期，代码简单地堆积在一起，只要能顺利地从上往下一次执行即可。但随着网站越来越复杂，造成了很多问题：全局变量冲突、函数命名冲突、引入js文件顺序等等2、模块化规范...
2024-01-10
WebPack工具运行原理及入门教程
WebPack是什么一个打包工具一个模块加载工具各种资源都可以当成模块来处理网站 http://webpack.github.io/ 如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。对于模块的组织，通常有如下几种方法：通过书...
2024-01-10
