前端领域框架百花齐放，各种优秀框架出现（react，Vue，ag）等等框架。为了方便开发者快速开发，开发对应的cli脚手架，来提高产出。然而初中级的前端工程师对项目里的webpack封装和配置了解的不清楚，就容易导致出问题不知如何解决，甚至不会通过webpack去扩展新功能，对webpack+vue项目究

plugin插件是webpack的支柱功能。webpack自身也是构建于你在webpack配置中用到的相同的插件系统之上！插件目的在于解决loader无法实现的其他事。 常用的插件由于插件可以携带参数/选项，你必须在webpack配置中，向plugins属性传入一个new实例，接下来我们介绍几个常用

初次接触webpack，还是在学习vue的时候，一直对wepack的打包机制不是很清楚近来有时间，了解了一下webpack打包js、css、html以及img的步骤以及踩了一些坑故此记录一下。webpack详细配置内容可以参考官网(https://webpack.docschina.org/)首先我们创建一个目录，这里我创建的目录为w

前言当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-serverwebpack-deb-serverwebpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内

目录一：初始化项目二：安装打包工具三：创建项目四：打包1：先创建配置文件2：package.jsonWebpack只对js进行打包；以安装插件为主；一：初始化项目npminit//查看初始化内容npminit-y二：安装打包工具//全局安装webpacknpminstallwebpack-g//把webpack和webpack-cl

什么是文件指纹⽂件指纹是指打包后输出的⽂件名的后缀。⽂件指纹如何⽣成Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的hash值就会更改module.exports={entry:{index:'./src/index.js',search:'./src/search.js'},

vue-cli是一个vue脚手架，可以快速构造项目结构vue-cli本身集成了很多项目模板：创建项目热更新当文件有修改时，页面会自动刷新，是因为服务器发送请求自动更新，是因为websocket的作用webpack支持CommonJS支持ESModule安装npminstall-g@vue/cli#or

开始之前：1.安装node环境2.安装npm或者cnpm（我使用的是npm）3.编辑器使用VSCode4.浏览器使用Chrome*通过npm或者cnpm安装的依赖，请务必注意版本号！！！过高或者过低的版本都有可能导致运行不成功！1.新建zhihu-daily目录（以下简称根目录）并在VSCode中打开该目录，使用“crtl+`”打开终

###面试之前准备什么？老实说，我自己平常没事就会看一些面试题，所以我都是直接去面的（当然过程也非常惨）。建议大家如果准备面试的话，需要做以下准备1.`背题`看一看最近的面经文，了解现在公司都在面什么类型的题，准备一些常见题，开背吧！如果一些基础的js都不会那问题就有点小大了。2.`

1、为什么要抽离公共代码在多入口文件的情况下，如果在每个入口文件中都引入了相同的模块，那么打包时，就会将这个模块重复打包进去，这是没有必要的。2、为什么要抽离第三方代码每次更改了自己的代码，重新打包，生成了新的hash文件名，而第三方包（如lodash）并没有改变，不需要重新打包。

Vue之安装路由router一、安装node.js，安装完node.js后，npm也会自动安装用node-v、npm-v来检测是否安装成功二、安装脚手架工具vue-cli使用命令：npminstall--globalvue-cli三、vue项目初始化命令先安装webpack，命令：npminstall-gwebpack初始化：vueinitwebpackmyV

代码在浏览器运行时，通常是通过压缩和丑化，导致对应的代码行号或者列号等跟之前有差异。假如代码打包之后在运行时报错了，调试会很不方便。那么如何调整这种转换后不一致的代码呢，答案就是source-mapsource-map从已转换的代码，映射到原始的源文件如何使用source-map1.根据源文件生

        前端的学习又进入一个新的篇章——vue-cli，感觉学习的难度有亿点点提高，所以写一些笔记来巩固对vue-cli的学习。一、了解vue-cli    vue-cli又称脚手架，说白了就是一个便捷开发项目的家伙，因为vue-cli可以自动构建出一个项目的骨架，以及配置一些复杂的webp

Webpack1.什么是webpack?官方：webpack是一个现代的Javascript应用的静态模块打包工具。非官方：webpack可以看做是一个模块打包机，它的作用是分析你的项目结构，找到js模块以及其它一些浏览器不能直接运行的扩展语言(如Scss、TypeScript等)，将它们打包成合适的(即浏览器可以识别

wbpack基本概念&&用webpack搭建react项目

前言上篇我们已经配置好了本地开发服务器，但是配置的相对比较凌乱，一个文件中有些是开发时用到的配置，有些是生成时用到的配置，有些是开发和生成都要用到的配置，所以我们这里把环境分为3个环境webpack.base.config.js：webpack基础配置，开发和生成环境都需要用到的配置webpack.dev.con