Webpack

基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML 参考文章： （1）基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML （2）https://www.cnblogs.com/souvenir/p/5015418.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4432649/blog/4732701

loader是use的简写 module: { rules: [ { test: /\.css$/, // loader: ['style-loader','css-loader?minimize'], //这是简写 use:[ //使用use 完整写法 'style-loader', { loader:'css-loader', options: { minimize:true, } }, ] }, use属性的值需要是个由loader名称组成的数组。Loader的执行顺序是由后到前的。 module:{ rules:[ { test:/\.css$/, //正则匹配.css use:['style-loader','css-loader?minimize'], // 从后往前执行 } ] } npm i -D style-loader css-loader 来源： oschina 链接： https://my.oschina.net/u/560237/blog/1842858

背景 随着前端复杂度的不断提升，诞生出很多打包工具，比如最先的 grunt ， gulp 。到后来的 webpack 和 Parcel 。但是目前很多脚手架工具，比如 vue-cli 已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现原理。其实了解这些工具的工作方式可以帮助我们更好理解和使用这些工具，也方便我们在项目开发中应用。 一些知识点 在我们开始造轮子前，我们需要对一些知识点做一些储备工作。 模块化知识 首先是模块的相关知识，主要的是 es6 modules 和 commonJS 模块化的规范。更详细的介绍可以参考这里 CommonJS、AMD/CMD、ES6 Modules 以及 webpack 原理浅析 。现在我们只需要了解： es6 modules 是一个编译时就会确定模块依赖关系的方式。 CommonJS 的模块规范中，Node 在对 JS 文件进行编译的过程中，会对文件中的内容进行头尾包装 ，在头部添加 (function (export, require, modules, __filename, __dirname){\n 在尾部添加了 \n}; 。这样我们在单个JS文件内部可以使用这些参数。 AST 基础知识 什么是抽象语法树？ 在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树

个人心得，项目使用vue两种方式，一种就是传统的使用方式，使用script标签直接引入； <script src="https://unpkg.com/vue/dist/vue.js"></script> 另外就是搭建脚手架，使用npm安装，安装步骤： 1、检查是否安装有nodeJS环境，没有的安装nodejs环境，4.0版本以上。 （1）、傻瓜式安装nodejs,去node官网下载，之后就是各种下一步。 安装vue-cli - npm install vue-cli -g - $ npm install --global vue-cli - $ npm install -g vue-cli 上面命令都可以安装vue脚手架，选择其中一条命令即可,行情问题，npm比较慢，可以使用cnpm 安装基于webpack工具的vue项目 vue init webpack sell //sell项目名称 执行完上面的命令后，窗口出现下图选择项 每一行对应分别是： 1. 项目名字 2. 项目描述 3. 作者 4. ES6代码风格检查器（需要就Y,不需要就N,建议新手N） 5. preset预设的选项，直接回车就好 6. 单元测试（如果基于界面测试选N） 7. e2e tests（选择N就好，目前没查为啥） *以上的配置会在项目的package.json配置里* 这样

一.前言 webpack配置较为繁杂，大部分教程开篇就从基本术语开始讲起，容易让人望而生畏。so，我已实用为目的写了这篇文章。 项目地址 github 码云 二.目标 <input type="checkbox" checked disabled>支持热替换 <input type="checkbox" checked disabled>支持scss，自动添加前缀 <input type="checkbox" checked disabled>支持eslint <input type="checkbox" checked disabled>支持babel <input type="checkbox" checked disabled>支持图片压缩 <input type="checkbox" checked disabled>支持多js入口，多html模板 三.搭建环境 创建 package.json 文件 npm init -y 首先，安装 webpack，webpack-cli 和 cross-env npm install --save-dev webpack webpack-cli cross-env 其中 cross-env 主要是用于比较方便的跨平台设置 process.env.NODE_ENV ,用于区分开发环境和生产环境。 新建目录src，目录下创建index

从Git上新建一个项目demo (或者从本地新建一个demo文件夹)； 在demo文件夹下，打开cmd（或者Git Bash），安装react： npm i react react-dom 安装webpack及相关 npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader webpack-dev-server：实现热更新; html-webpack-plugin：实现自动将打包好的文件注入到页面; 如果使用less进行开发可以加上"less less-loader"; 4. 安装babel，将高级语法转换成es5 npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader 其中@babel/core是babel的核心模块，包含了babel的核心功能； @babel/preset-env支持转换ES6以及更新的js语法，并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码；@babel/preset-react包含了babel转换react所需要的plugin；babel-loader是webpack的babel加载器。 5. 搭建项目结构 在demo文件夹下

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 提供一个官方命令行工具，可用于快速搭建大型单页应用（SPA）。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目： 1 # 全局安装 vue-cli 2 ＄ npm install --global vue-cli 3 # 创建一个基于 webpack 模板的新项目 4 ＄ vue init webpack my-project 5 # 安装依赖，走你 6 ＄ cd my-project 7 ＄ npm install 8 ＄ npm run dev 注意：CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。 1.1、环境搭建 1.1.1、安装node.js 从n ode.js官网 下载并安装node，安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。 如果安装不成功

转载自：https://blog.csdn.net/sky_LQ/article/details/80729547 Vue脚手架使用步骤 2018年06月19日 12:10:35 sky_LQ 阅读数：3444 1、安装webpack 全局安装webpack命令行： npm install webpack -g 2、安装 vue -cli 脚手架 构建工具 全局安装，输入命令行： npm install vue-cli -g 安装完成后执行命令: vue -V 查看版本号，出现相应得版本即为安装成功 3、通过vue-cli，初始化vue项目 通过以上几步，将我们安装脚手架所需要的环境和工具都准备好好了，下面就可以使用vue-cli来初始化项目。 (3.1) : 新建一个mySelf（项目名）文件夹来放置项目， 在新建文件夹的上一级文件夹右键打开命令行工具，输入命令行：vue init webpack mySelf(项目名) 注：项目名不能大写，不能使用中文 解释一下这个命令，这个命令的意思是初始化一个vue项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中mySelf是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。 (3.2) : 以下是脚手架安装过程（安装步骤解析在图片下面） vue-cli初始化项目选项配置详细解析 (3.3

今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个offer。（开心.png），但还是挂了两次，有点遗憾。 面试题总结 面试完之后，赶紧总结了一波，前端这个岗位，这两家大厂的面试思路和面试问题其实都差不多： 1. JS底层： 说一说js的原型与继承。 分析一下优秀的前端框架源码，这么写的优缺点在哪。 this指向问题，this的深拷贝如何实现，这个也是高频率被问到的问题。 js事件流是怎么样体现的。 柯里化函数。 2. 数据层： 写过中间件么？ 了解koa么？ 数据安全是怎么处理的。 axios 与 fetch的实现。 3. HTTP相关： 跨域问题的产生与解决。 http1.1时如何复用tcp连接。 http2.0新的变化。 http报文的请求分成几个部分？ 前端与后台交互的时候会产生几次握手，分别做了什么？ 4. 框架： 说一说vue的源码的响应式与数据驱动，主要是问原理。 Vue与react的区别在哪，这个也是问底层实现。 虚拟dom、diff算法等等，基本没问到过怎么去使用。 像组件传值啥的没提过。还有就是路由的管理 有没有封装过组件库， dev-server是怎么跑起来的。 5. 服务端与工具 主要是Node的问题，有没有拿node做过中间层。 Node的线程处理、事件循环。 这个主要就是 webpack 与 babel 的配置

koa2实现简易的webpack-dev-server热更新 原文 https://github.com/zhuangZhou/Blog/issues/3 闲来无事，用koa2撸了一个简易的webpack-dev-server;其实网上很多express搭建的热更新，但是koa2很少；欢迎大佬拍砖和赐教； 源码 配置基本的webpack 1、下载安装包 webpack webpack-cli html-webpack-plugin css-loader style-loader 由于这里用的是最新的webpack版本，所以需要安装webpack-cli。 2、创建并配置webpack.config.js 这里就不具体配置了，如需要详细配置教程， 请上这里 ; 基础配置完成后，在plugins里配置HotModuleReplacementPlugin插件用于热更新；由于HotModuleReplacementPlugin是webpack内置的插件，所以不需要安装，直接引用就行 const webpack = require('webpack'); plugins:[ new webpack.HotModuleReplacementPlugin() ] 实现webpack-dev-middleware的koa2中间件 webpack-dev-middleware是实现webpack