webpack之拆分开发环境和生产环境配置 1、拆分开发环境和生产环境配置 （1）公共路径 publicPath配置选项在各种场景中都非常有用，你可以通过它来指定应用程序中所有资源的基础路径 基于环境配置 在开发环境中，我们通常有一个assets/文件夹，它与索引页面位于同一级别，这没太大问题，但
解决方案 在引入的ui样式文件的对应处理loader中，将modules.mode设置为global 即可 { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
打包警告：解决办法 1.打包继续压缩 vue.config.js （当然你得先去安装一下） //npm i -D compression-webpack-plugin const CompressionWebpackPlugin = require('compression-webpack-plugin'); config.plugin('compression-webpack-plugin').use(new CompressionWebpackPl
1、安装express-generator npm i express-generator -g 2、创建一个express项目 express my-express-project 这时候能看到my-express-project文件夹下的内容是这样的 4、安装相关项目依赖 npm install 然后把刚刚打包后的dist文件夹下的所有文件复制到public文件夹下面 5、
好家伙 先扩充一下知识点: 什么是.less文件? 作为一名前端开发的同学，很多时候我们都无法避免地要去写大量的 CSS 代码， 而且耗费的时间还不少，所以学习一种能够提升开发效率的 CSS 预处理器是必不可少的 答:Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语
命令行运行 vue init webpack vue-demo 报错： vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443 查了下问题，开始以为是没有安装webpack 然后通过 cnpm install -g webpack ，再运行 vue init webpack vue-demo 还是报错。 打开 h
命令行运行 vue init webpack vue-demo 报错： vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443 查了下问题，开始以为是没有安装webpack 然后通过 cnpm install -g webpack ，再运行 vue init webpack vue-demo 还是报错。 打开 h
好家伙， 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后，自动打开浏览器 open:ture, //在http协议中，如果端口号是80，则可以被省略(只有) port:80 //指定运行的主机地址 host：'127.0.0.1' } 注意:凡
创建项目，初始化项目 — 这里使用隔行变色的主页来做演示。 运行npm init -y初始化项目，使用npm管理项目中的依赖包 init后会生出 package.json npm init -y 创建需要的文件夹和文件 webpack安装的两种方式 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的
webpack的安装 webpack webpack官网文档 webpack中文文档 webpack安装 开始之前往nodejs.org官网中下载安装 webpack的安装需要依赖nodejs中的包管理器进行（npm和cnpm）npm不需要下载，node安装成功就有 cnpm 安装 使用npm安装会自动跳到国外镜像下载，下载速度慢且安装率低，所以
要想用vue模块化开发 1.首先全局安装webpack npm install webpack -g 2.全局安装vue脚手架 npm install -g @vue/cli-init 3.创建空文件夹cmd进入黑窗口初始化vue项目 vue init webpack vue-name #vue脚手架使用webpack模块化一个appnae项目vue init webpack vue-name --offline
好家伙， 1.html-webpack-plugin的作用 讲一下为什么需要这个插件 存在问题:在点开locahost:8080之后出现的是项目的根目录,而不是网页 这时候需要再点开scr文件夹才能看见index首页 所以我们想要一进8080就能够看到index首页, 解决方法:我们可以把index放到根目录中,
1、什么是vue-cli 2、全局安装vue-cli 3、创建项目（命令行方式） 4、创建项目（图形界面方式） 一、vue-cli2 1. 什么是vue-cli 是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。 2.全局安装vue-cli 前期准备 下载node安装包,傻瓜式安装
全局安装webpack 安装webpack npm install webpack -g 安装cli npm install webpack-cli -g 全局安装会将项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败 查看版本信息 webpack -v 运行的时候出现“webpack'不是内部或外部命令，也不是可
好家伙， 1.webpack中的默认约定 默认的打包入口文件为src -->index.js 默认的输出文件路径为dist -->main.js 既然有默认，那么就说明肯定能改 2.entry和output 在webpack.config.js配置文件中， 通过entry节点指定打包的入口。 通过output节点指定打包的出口。
webpack serve [webpack-cli] Promise rejection: TypeError: Class constructor ServeCommand cannot be invoked without 'new' [webpack-cli] TypeError: Class constructor ServeCommand cannot be invoked without 'new' at run (F:\LearnCode
好家伙, 1.webpack的基本使用 写个例子:实现一个奇偶行变色列表 步骤如下: ① 新建项目空白目录，并运行 npm init-y命令，初始化包管理配置文件 package.json② 新建src源代码目录③ 新建 src->index.html 首页和src-> index.js 脚本文件④ 初始化首页基本的结构⑤ 运行 npm install
前言：最近想要系统的复习一下ES6，故搭建一个环境。 1.目录构成 首先，我们新建除node_modules和package.json外的文件（.prettierrc这个是我的代码格式，可以不用配），然后npm init生成package.json文件。 // .babelrc文件内容 { "presets": [ [ "@babel/pre
Webpack笔记 从使用 webpack 的角度来说，搞清楚 webpack 的配置即可 安装 需要 node 14+ 和 npm（安装 node 时自动安装）。 全局安装 npm install webpack webpack-cli -g 局部安装（推荐） npm init -y -D 表示安装的开发依赖。加不加并不影响，但是推荐加，这样项目 package.json 会
webpack概念module、chunk和bundle module：js的模块化，简单说就是通过import引入的代码 chunk：webpack根据功能拆分的代码块，包含三种情况 项目入口entry 通过import()动态引入的代码 通过splitChunks拆分出来的代码 bundle：webpack打包后的各个文件，对chunk编译压缩打包后的产物。
### 写出vue高级方法 5个并列出含义 - $nextTick(callback) 数据更新，触发dom更新执行的回调函数 - $set(更新数据，key，value） 强制更新数据与视图（数组下标更新，更新视图） - $on 监听事件 - $off 移除监听 - $emit(事件名，事件值) - mixins 混入 - extends 获取实例
目录 1、初始化项目2、安装webpack相关的开发依赖 1、初始化项目 npm init npm init -y 两个命令都是对项目进行初始化操作，对包进行管理。 -y的含义是yes的意思，作用是init的时候省去了敲回车的步骤，直接生成默认的package.json文件。 npm init npm init -y 2、安装w
我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。 ps.本文项目使用Vue CLI创建，所用的Vue版本为2.6.11，webpack版本为4.46.0。 创建项目 首先使用Vue C
set 方法 (1)当动态给 data 中对象添加属性，没有响应式原理时，这时会需要$set方法，set可以实现动态给data添加属性，实现响应式效果及使用 (2)解决数据没有被双向绑定我们可以使用 vue.$set 实例方法 原因：vue中并不是什么时候都能实现双向绑定 mixin 方法 混合 (mixins)混合对
Webpack 1、什么是Webpack 本质上，webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。 Webpack是
