ICode9

精准搜索请尝试: 精确搜索
  • 06.webpack中source-map的配置2022-03-06 11:31:33

    认识source-map 一般情况下真实运行在浏览器上的代码是经过webpack等前端构建工具打包之后的代码,在打包的过程中会对代码做压缩和混淆丑化,所以这就会导致运行在浏览器的代码和我们在开发阶段写的源代码其实是有差异的,主要体现在以下几个方面: 源码中ES6+的语法会通过babel工具转化

  • 创建Vue2项目2022-03-06 01:31:27

    1.安装Node.js * Node.js中包含了npm工具 安装后查看版本: node -v npm -v   2.设置npm的源为国内源 npm config set registry https://registry.npm.taobao.org   3.安装webpack npm install -g webpack   4.安装脚手架 npm install -g vue-cli   5.创建项目 假设项目

  • webpack.config.js2022-03-06 01:04:37

    const path = require('path');module.exports = { entry: { index: './src/index.ts', // 输入 }, mode: 'development', // 开发 module: { rules: [ { test: /\.ts$/, // 处理.ts文件

  • webpack基础2022-03-05 10:32:14

    目录前端工程化webpack基本使用创建项目webpack 中的默认约定自定义打包的入口与出口webpack的插件webpack插件的作用webpack-dev-server插件webpack-dev-server插件介绍webpack-dev-server插件工作原理html-webpack-plugin插件html-webpack-plugin插件介绍解惑 html-webpack-plug

  • vue2+webpack 支持 vite2022-03-03 13:31:40

    本地项目 vite 使用 1. 安装 vite以及相关的插件 npm install -D vite npm install -D vite-plugin-vue2 npm install -D @originjs/vite-plugin-require-context npm install -D vite-plugin-dynamic-import 2. 在根目录新建一个文件 vite.config.js, 复制以下内容 /** 本地开

  • webpack学习使用2022-03-02 23:02:20

    什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用 如:vue项目是基于es6语法构建的,而大多数浏览器都是使用的es5语法,所以我们需要

  • webpack运行报错2022-03-02 22:58:31

    当下版本(并不匹配): 后续安装一系列包… package.json中进行相关配置: 报错: npm ls --depth 0可见包版本不匹配: 查询相关资料,卸载项目相关不匹配版本包后安装匹配包版本: 此时报如下错: 更换vue-loader版本: 此时报如下错: 根据提示换包版本: 打包成功: 运行失败(粗心大意

  • vue2 配置本地IP地址访问项目2022-03-02 20:02:57

    修改前 修改后 1、在config文件中 host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 2、package.json配置文件 "dev": "webpack-dev

  • webpack使用入门2022-03-02 12:31:13

    流程  打开项目 -> 配置webpack.config文件 -> 终端进入项目目录 -> 输入指令webpack(或者webpack --watch)打包得到输出文件  -> 导包使用输出文件即可      1.新建简单项目   编写模块Hello.js //exports将模块暴露出去exports.sayHi=function (){ document.write("<div

  • TypeError: Cannot read property ‘tapPromise‘ of undefined2022-02-26 20:04:04

    坑比,我的包明明就是5.0为啥还是报错,还是必须卸载了,从新安装,卸载cnpm uninstall compression-webpack-plugin     安装,cnpm i compression-webpack-plugin@5.0.1    

  • 【笔记】gulp、webpack、vite的区别2022-02-26 15:02:06

    webpack和gulp都是热门的前端构建工具,他们的区别是什么呢?     gulp的官网上是这样介绍的,“gulp是一个工具包,可帮助您自动化开发工作流程中繁重而耗时的任务。”,说明gulp旨在强调自动化前端构造流程,通过用户自定义配置一系列的任务(Task),并排列好顺序后执行,从而构建自动化流程。

  • 前端 跨域2022-02-23 23:03:52

    1 同源策略: (1)协议相同,指http  (2)域名相同  (3)端口相同 2 同源策略的目的: 为了保证用户信息的安全。防止恶意的网站盗取数据。 设想这样一个情景:A网站是一家银行,用户登录以后,又去浏览其他的网站B,如果网站B可以读取A网站的Cookie,会发生什么问题? 3 跨域 现代网站html等文件与后台

  • webpack版本及less等版本的查看方式(持续添加)2022-02-23 17:02:00

    1.查看webpack的版本 npm view webpack versions 得到如下 2.查看less-loader版本 npm view less-loader versions 得到如下    

  • 【重点突破】—— vue+webpack+axios初始化搭建项目框架(转)2022-02-23 13:32:52

    前言:这个教程从零开始一步一步说明搭建一个完整实用vue项目的所有流程,vue-cli + webpack + vue-router + ant-design-vue + axios。在原教程基础上完善了axios封装请求,UI组件库换用ant-design-vue。(教程转载自GQguoqi博客)   一、准备工作 在用Vue.js构建大型应用的时候推荐使用

  • Webpack核心概念2022-02-23 12:30:19

    文章目录 核心概念entryentry的两种用法 outputoutput两种用法 loaders用法目前常见的Loaders plugins常用的Plugins mode 核心概念 本文主要学习webpack入门的一些核心概念,包括webpack.config.js的entry,output,loaders,plugins,mode等,下面我们一个个来介绍 entry entry是

  • webpack设置自定义环境变量2022-02-22 14:58:36

    cross env cross-env - npm EnvironmentPlugin EnvironmentPlugin | webpack 中文网 DefinePlugin DefinePlugin | webpack 中文网 三者区别 EnvironmentPlugin 基于 DefinePlugin,提供更便捷的写法,其设置的环境变量可以在编译环境和运行环境同时取到 cross-env设置的值只能在编

  • webpack打包出的文件在index.html引入路径斜杠被转义2022-02-21 09:58:00

    webpack打包出来的文件在index.html引入的路径被斜杠被转义 我遇到的原因是webpack打包设置问题 //webpack.config.js文件 const { assetsPath} = require('./utils') //webpack打包输出配置 output: { path: config.build.assetsRoot, filename: assetsPath('js/[n

  • react项目的运行流程2022-02-20 17:00:21

    根据es6的语法规则,我们可以使用import语句,把资源引用出来,最后项目上线时,react脚手架会通过底层打包工具webpack,打包整合资源。

  • Vue创建2022-02-20 11:33:20

    查看版本node -v npm -v vue init webpack 项目名称 vscode 调终端【Ctrl】+【Shift】+【Y 】 vue2.9.6升级解决问题 https://juejin.cn/post/6844903720954626056    

  • vue框架解析2022-02-20 09:32:44

    vue 编码步骤 引入vue.js文件 定义一个vue的管理范围 <div id='app'> </div> vue1.0里面vue的管理区域的id可以定义在HTML以及body标签上 vue2.0里面不允许这样来做 定义一个vue的对象 new Vue({ el:'#app', data:{ // 定义将来要在vue管

  • 关于vue-cli 4默认配置的查看2022-02-18 22:31:19

    背景 vue-cli4 采用了无配置方式,在项目文件夹下直接看不到webpack的相关配置,可用如下方法查看 方法1 在终端项目跟目录下输入指令 npx vue-cli-service inspect --mode development >> webpack.conf.dev.js 会在项目根目录下生成一个 webpack.conf.dev.js文件,里面就会有当前的默认

  • Element Plus 配置自动导入2022-02-18 12:35:09

    安装 npm npm install unplugin-vue-components unplugin-auto-import -D yarn yarn add unplugin-vue-components unplugin-auto-import -D pnpm pnpm install unplugin-vue-components unplugin-auto-import -D 配置 Element-Plus 官网给的是在webpack.config.js中引入,如果我们

  • webpack 处理css兼容问题2022-02-17 10:32:54

    webpack 处理css兼容性问题需要使用 postcss-loader 和 postcss-preset-evt 来解决。 1、 postcss-loader 处理兼容问题, 2、 postcss-preset-evt   使用npm安装 postcss-loader 和 postcss-preset-evt npm i postcss-loader postcss-preset-evt   在package.json里添加配

  • webpack5配置问题2022-02-17 01:00:21

    问题描述: 安装webpack-dev-server(4.7.4), 在package.json的scripts中增加 "script":{ "serve":"webpack serve" } 运行起来后只显示public/index.html的模版页面,js文件并没加载进来。 查看了下输出 Content not from webpack is served from '/Users/admin/Desktop/vu

  • vue2+webpack 和 vite+vue3 如何设置以及获取环境变量2022-02-16 19:01:14

    1.vue2+webpack   首先在package.json同级目录下新建.env.dev 和.env.pro(名字可以自己随便取这里为了简便就直接取.dev和.pro)      在相应的文件中设置你在不同环境下要使用的变量;例如 NODE_ENV='pro' VUE_APP_URL='https/pro' 然后在package.json中设置我们启动和打包

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有