前端框架及项目面试 聚焦Vue/React/Webpack前端面试时，除了考察原生基础之外，还必考Vue、React 和 Webpack框架内容，对于求职者 是刚需。在这三者的基础之上，还会考察能力方面，即项目设计和项目经验，最终才能通过。这就是这门课要解决的问题，具体内容见下方，或直接观看导学视频 第1章
webpack中loader和plugin这两个概念如何区分。 对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程； 对于plugin，它就是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文
写在最前面 本文目的致力于提升自己，帮助那些对于想要提升自己的同学。 要做些什么？ 从零搭建一个react开发环境，让自己在实际工作中提升开发效率。 能达到什么效果？ 只能这样子说：你可以像如数家珍般说出每一行代码的作用，对于不同的场景可以想改就改，达到自己想要的。 需要具备那些知识
准备工作 预装软件NodeJs和VSCode 新建文件夹ts_in_action npm命令初始化工程：npm init -y，生成package.json文件 全局安装TypeScript：npm i typescript -g，这样我们可以在任何地方使用ts的编译器tsc，查看编译器的帮助信息 tsc -h 创建配置项：tsc --init，生成tsconfig.json文件 新建src
写在最前面 本文目的致力于提升自己，帮助那些对于想要提升自己的同学。 要做些什么？ 从零搭建一个react开发环境，让自己在实际工作中提升开发效率。 能达到什么效果？ 只能这样子说：你可以像如数家珍般说出每一行代码的作用，对于不同的场景可以想改就改，达到自己想要的。 需要具备那些知识
一.安装前先npm初始化 1 npm init -y 2 npm i webpack webpack-cli -D 创建webpack.config.js文件 let path = require('path') // 相对路径变绝对路径 module.exports = { mode: 'production', // 模式 默认 production development entry: './src/index',
Vue框架使用vue简介MVVM的介绍vue项目步骤vue项目目录详解运行vue可以自动打开浏览器如何使用less写样式 vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，于与第三方库或既有项目整合
该笔记是博主学习webpack课程时做的笔记，里面加了一些自己的一些理解，也踩了一些坑，在笔记中基本上都更正过来了，分享给大家，如果发现什么问题，望告知，非常感谢。 1. 为什么要学webapck 为什么要学webpack？ webpack 有什么作用？ 由于项目一般比较大，为了项目的可维护性和可扩展性，我们一般
pm2 npm install pm2 -g 装完后有pm2 全局命令 用npm run 方式，一旦停止，就不能被访问，因此用PM2部署，能够维持进程 开启： PM2 start /bin/www 开启，维持进程 其他命令： PM2 list pm2 --help pm2 stop name pm2 restart all 方案1 前后端分离部署，静态资源部署到nginx, nodejs部署到pm2
序言 Dva.js是阿里前端团队开发的一个基于react、redux、webpack的一个前端框架，他能够实现react-redux-webpack环境一键部署，能帮前端工程师节省不少环境搭建的时间。 而且经过优化的redux跟原生redux相比使用起来要方便不少。这里来大致讲一下dva.js的用法。 资料
原文链接此文是我同事写的，搭建Express结合Webpack。以下是正文，后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实现前后端热更新开发，如果你还不太了解webpack推荐阅读webpack 官网文档 What 什么是 webpack dev server Webpack dev s
上篇文章我们实现了一个简易版的webpack，可以打包我们的js代码，但是还不能处理我们的 css、less、scss、图片等，这些都是需要loader和plugin来处理，所以，为了打包器更强大，需要增加loader和plugin的支持，接着我们就手写实现一个简单的loader 定义一个index.less文件 body{ backgroun
1.创建json，npm int 2.引入的依赖用cnpm install xx --save-dev或者npm install xx --save-dev 3.用到的loader和plugin有 "clean-webpack-plugin": "^3.0.0",//清理上次打包的文件 "css-loader": "^2.1.1",//对js里引入css，导出到js里 "extrac
在安装了相关工具之后，我们现在就可以创建一个分模块的vue项目了。 1、前提约束 完成nodejs，vue-cli，webpack，webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2、操作步骤 打开命令行，执行以下命令，创建项目 # 进入到桌面 cd C:\Users\zhangli\Desktop # 创建一个
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，运行在服务器端。nodejs所携带的npm包管理命令可以方便的安装vue-cli, webpack, webpack-dev-server等命令，而这些命令是创建或者运行vue项目的基础。 1、安装nodejs 在http://nodejs.cn/download/下载nodejs的windows安
webpack webpack的机制，它就是个模块打包器，默认只支持JS模块; 1、npm init -y 初始化 webpack安装，不推荐全局安装，因为可能你的项目，是不同版本的webpack package.json,name名不要起webpack，不然无法安装 wepback { "name": "webpack_study", } 2、npm install webpack webpack
作为webpack的初学者，你肯定也踩到了这个坑。 项目名称是 webpack，所以在初始化的时候会生成一个package.json文件，这个文件里有个name属性，他就是你的项目名称，当安装通过npm install webpack安装webpack 的时候就会报错，表示重名了。 把项目package.json文件的name属性改一下就可以了，
1.模块化的分类 A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js B.服务器端的模块化 服务器端的模块化规范是使用CommonJS规范： 1).使
对着webpack中文文档敲实例时出现一个报错： 原因是webpack.optimize.CommonsChunkPlugin插件不能用了，需替换为optimization 解决办法： webpack.config.js
什么是tree-shaking？ 前端中的tree-shaking可以理解为通过工具"摇"我们的js文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在webpack项目中， 有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖啦某个模块，但其实只使用其中的某
webpack管理输出 output output配置如何输出最终想要的代码，output是一个object里面包含一系列配置 filename output.filename配置输出文件的名称，为string类型，如果只有一个输出文件，我们可以将它写成静态不变的 filename:"bundle.js" 例子如下： 新建一个文件并命名为oneEntry.js,内
webpack-dev-server 什么是webpack-dev-server？ webpack-dev-server是webpack官方提供的一个小型Express服务器。 通过配置它可以在开发模式下为webpack打包生成的静态资源文件启动一个web服务器，并检测代码的进行实时更新 webpack-dev-server 只能工作于development模式 webpack
1. 运行npm init -y 快速初始化项目 2. 在项目根目录创建src源代码目录和dist产品目录 3. 在src目录下创建index.html 4. 使用npm安装webpack，运行npm i webpack-cli -D a. 全局运行npm i npm -g 5. 注意：webpack 4.x提供了约定大于配置的概念，目的是为了尽量减少配置文件
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了，再说以后想再开发还得重新写console。webpack提供了删除console的插件，这里分两种： vue-cli2 生成环境去除console.log 1. 项目build 下面webpack.prod.config.js 文件中: pl
前两篇文章中，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。 本文罗列出了十多种优化方式，大家可以结合自己的项目，选择适当的方式进行优化。这些 Webpack 插件的源码我大多也没
