首页 > TAG信息列表 > Loader

webpack学习

webpack webpack介绍 用于现代 JavaScript 应用程序的静态模块打包工具，将高版本的代码打包成低版本能使用的代码（兼容低版本） webpack共分为四个部分* 入口 * 出口 * 加载器 * 插件 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器

万字总结前端的各种知识点

《我的前端学习笔记》 目录： [TOC] 事件循环 The EventLoop model is essentially a concurrency model, which is good at I/O-bound. A successful case is Node.js while its EventLoop model is a little difference with browser's. 一些注意点： 如果在一个微任务的执行期间

三、Webpack5项目

介绍 我们将使用前面所学的知识来从零开始搭建 React-Cli 和 Vue-cli。 Vue 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin")

webpack基础_5处理图片资源

处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js"

webpack5 图片转base64

webpakc5中asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。     qiankun子应用集成到主应用的时候，图片不显示，可以转base64  

织梦CMS粘贴word图片且图片文件自动上传功能

​  ueditor粘贴不能粘贴word中的图片是一个很头疼的问题，在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴，因为这个需求头疼了半个月，因为前端方面因为安全的原因是不允许访问本地文件的。 首先说一下，ueditor粘贴word图片的问题已经解决，但是不是纯web方法解决的，

webpack 打包 - 6. 配置 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）

配置devServer只需要在 webpack.config.js 中添加如下配置即可： // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：npx webpack-dev-server devServer: { // 项目

webpack基础_4处理样式资源

介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader（加载器） 来帮助 Webpack 解析样式资源。 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用。 官方文档找不到的话，可以从社区 Github 中搜索查询 webpack中文官方文档 处理 Css 资源 1. 下载包 npm i css-l

umeditor粘贴word图片且图片文件自动上传功能

​  ueditor粘贴不能粘贴word中的图片是一个很头疼的问题，在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴，因为这个需求头疼了半个月，因为前端方面因为安全的原因是不允许访问本地文件的。 首先说一下，ueditor粘贴word图片的问题已经解决，但是不是纯web方法解决的，

导航页面设计/课程

导航页面设计/课程 导航页面设计/课程免费下载 在 HTML、CSS 和 JavaScript 中 HTML： 部分导航 h1 前沿趋势 h3.span.loader 跨度.m B 跨度.m E 跨度.m N 跨度.m E 跨度.m F 跨度.m I 跨度.m T 跨度.m S 跨度.m 跨度.mo 跨度.mf 跨度.m

直接在windows系统可以上架iOS app吗

有2种方法: 1.可以通过装苹果虚拟机来运行application loader。不过要求系统cpu是intel的。比较耗时间，我以前折腾装了个花了一个星期才搞好。 2.另外可以用第三方工具appuploader，跨平台的application loader。appuploader可以在windows上，linux上和mac上上传ipa和发布ipa。当前我用

发布-build命令

1.配置webpack的打包发布 　　在package.json文件的script节点下，新增build命令如下： "script":{ "dev":"webpack server",//开发环境中，运行 dev 命令 "build":"webpack --mode production" //项目发布时，运行build命令 } 2.把JavaScript文件统一生成到js目录中 　　在

webpack中的loader

1.loader概述 在实际开发过程中，webpack默认只能打包处理 .js 后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！ loader加载器的作用：协助webpack打包处理特定的文件模块。比如： css-loader 可以打包处理.css相关的文件 c

webpack css-loader模块化导致的antd样式不好用解决方案

css-loader 模块化会导致 antd 样式文件无效，解决的方式就是排除 node_modules 下的目标文件就可以 如果你用的 less 就可以按以下方式来配置 { test: /\.less$/, include: /node_modules/, // node_modules 下的 less 文件不使用模块化 use: [ { loader: MiniCssE

ts项目搭建

1.创建文件夹&项目初始化 npm init -y 2.下载 npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader npm i -D @babel/core @babel/preset-env babel-loader core-js npm i -D css-loader less less-loader style-loader html-webpack-plugin clean-

webpack 优化

SourceMap devtool 配置 热模块替换 webpack serve 默认开启 CSS style loader 实现了 js 文件需要自己处理 // main.js // ... if (module.hot) { // 是否支持热模块替换 module.hot.accept('./js/some.js') module.hot.accept('./js/some2.js') } oneOf 每个文件只能被

sass---安装sass失败解决方法

今天在做vue项目，项目是老项目新开，使用的webpack比较老旧，通过正常的安装sass的方法，报错，无法安装。 常规的安装方法： 1、安装sass-loader npm install sass-loader --save-dev 2、安装dart-sass npm install sass --save-dev 或者合并： npm i sass sass-loader -D 结果今天，在第

webpack3和webpack4区别

1.mode webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。 webpack4中通过内置的mode使用相应模式的内置优化。比如设置mode等于'development'，会将 process.env.NODE_ENV 的值设为 development。设置mode等于'production'，会将 

记录vue

#查看版本 node -v #安装 Node.js 淘宝镜像加速器（cnpm）注意源地址已经改变 npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install cnpm -g #全局安装 vue-cli cnpm install vue-cli -g #查看是否安装成功 webpack -v 或 vue list # 这里的 myvue 是项目名

vue记录

#查看版本 node -v #安装 Node.js 淘宝镜像加速器（cnpm） cnpm install cnpm -g #全局安装 vue-cli cnpm install vue-cli -g #查看是否安装成功 webpack -v 或 vue list # 这里的 myvue 是项目名称，可以根据自己的需求起名 vue init webpack myvue #初始化运行 cd myvue cnpm instal

Vue配置scss匹配node-scss与sass-loader

1、node 版本、node-sass 版本及 sass-loader 版本查看： 其一、我的 node 版本查看：在命令行输入查询命令：node -v我的 node 版本为：v14.19.0其二、我的 node-sass 版本查看："node-sass": "^4.14.1" 其三、我的 sass-loader 版本查看："sass-loader": "^7.3.1" 2、node 版本

搭建 Webpack + TypeScript + Babel 的项目

安装依赖包 首先把 webpack 相关的依赖安装了： npm i -D webpack webpack-cli 安装各个 loader： npm i -D ts-loader babel-loader source-map-loader 安装 babel 的核心： npm i -D @babel/core 安装 babel 的 preset： npm i -D @babel/preset-env @babel/preset-typescript 安装

sass-loader 版本不兼容导致老项目起不来，重新构建失败的问题 Module build failed (from ./node_modules/_sass-loader@7.3.1@sass

Failed to compile. ./src/styles/index.scss (./node_modules/_css-loader@1.0.1@css-loader??ref--8-oneOf-3-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??ref--8-oneOf-3-2!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--8-oneOf-3-

webpack

yarn安装 npm install -g yarn //检测yarn yarn -v 使用yarn安装 webpack yarn add webpack webpack-cli --dev//打包npx webpack css样式loader安装 yarn add --dev style-loader css-loader webpack插件使用 　　自动生成index.html插件 yarn add html-webpack-plugin --

vue 使用sass定义全局变量

一、安装以下依赖： npm i -D sass-loader@8.x -D npm i node-sass@4.14.1 -D npm i sass-resources-loader -D 二、新建文件：variables.scss $primary-color:#547fcd; $secondary-color:#6992dd; $text-blue-color:#648eda; $highlight-color:#7cffe2; 三、配置 vue.config.js：