持续更新。。。css提取和压缩：1.css提取：mini-css-extract-plugin安装：npminstall--save-devmini-css-extract-pluginnpm地址：https://www.npmjs.com/package/mini-css-extract-plugin2.css压缩css-minimizer-webpack-plugin安装：npminstallcss-minimizer-webpack-pl

npminstall-gcreate-react-appnpxcreate-react-appmy-app1.npmrun eject 2.html计算<script>!(function(win,doc){functionsetFontSize(){varbaseFontSize=100;varbaseWidth=320;varclientWidth=docume

//搭建环境------------------------------------------------------------//package.json文件npminit//安装webpacknpminstallwebpack-gnpminstallwebpack-cli-g//简单打包webpack./a.js./bundle.js//插件npminstallhtml-webpack-plugin--save-devnp

vscode去除源码注释正则/\*+///.*$/\*.*\*/格式化文档^\n测试代码//index.jsimport('./a').then(v=>console.log(v))//a.jsconsole.log('a.js')exportconstcount=1exportdefault2//webpack.config.jsmodule.exports={mode:'

为什么要使用模块打包工具1.模块化开发ESModules存在兼容性问题打包之后成产阶段编译为ES5解决兼容性问题2.模块文件过多网络请求频繁 开发阶段把散的模块打包成一个模块解决网络请求频繁问题3.支持不同类型的资源模块对于有兼容问题的代码,我们可以通过模块加载器（Load

 1、前端UI框架中，React的使用率和使用体验都非常高；Vue.js使用体验也不错，使用率虽然每年都在涨，但是总体使用率还是差了些；Angular虽然有着不错的使用率，但是使用体验却越来越差2、NodejsServer框架中，Express的使用率和使用体验都在逐年走高，Koa的使用率非常低，使用体验也不是很好

本文开始我会围绕webpack和babel写一系列的工程化文章，这两个工具我虽然天天用，但是对他们的原理理解的其实不是很深入，写这些文章的过程其实也是我深入学习的过程。由于webpack和babel的体系太大，知识点众多，不可能一篇文章囊括所有知识点，目前我的计划是从简单入手，先实现一个最简单的

package.json中的webpack优先使用本地的，cmd中使用全局的。局部安装webpack

在node_modules的.bin目录内，找到webpack-dev-server.cmd,添加 "--max_old_space_size=2048"在上面图中的两处位置，之后重启服务。（用npm安装的包会有webpack-dev-server.cmd文件，用cnpm安装的包貌似没有webpack-dev-server.cmd文件）

1、首先安装webpack,如果你使用webpack4+版本，你还需要安装CLI。npminstall--save-devwebpack@<version>npminstall--save-devwebpack-cli 在package.json的scripts属性里面配置快捷指令"scripts":{"test":"echo\"Error:notestspecified\&

参考了jherr的webpack联邦多版本，基于unpkg以及verdaccio实现一个私有版本的测试环境环境准备docker-composeversion:"3"services:unpkg:image:dalongrong/unpkg:http-envenvironment:-"NPM_REGISTRY_URL=http:/pm-r

一、前言这一部分需要用到webpack的配置文件了webpack.config.js，首先在项目外围创建webpack.config.js文件，如下包括五大核心。module.exports={//指定入口文件entry:'',//指定输出目录output:{},//配置打包环境mode:'',//指定webpack打包时要使

随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流

1.使用npm下载loadernpmistyle-loader-Dnpmicss-loader-Dnpmiless-Dnpmiless-loader-D 2.配置webpack.config.js文件/*webpack配置文件，作用：指示webpack怎么干活，干哪些活当你运行webpack指令的时候，会加载其中的配置所有的构建工具都是基于No

前言：学习React16+React-Router4从零打造企业级电商后台管理系统慕课网课程中的项目准备阶段，重点突破webpack的配置。一、开发环境依赖git->gitee.com课程官网的git仓库webpack等->yarn->nodejsnode-sass 二、webpack的配置webpack的安装和配置系统里多

首先必须要有npm，window下无法在线更新node.js版本，所以每次要更新版本需要重新安装node.js1.新建一个文件夹用于存放项目mkdirfileName2.下载一个全局生成vue项目的脚手架vue-cli安转指令：npminstallvue-cli-g3.初始化一个项目vueinitwebpack<项目名>。这里的es

1.入口告诉webpack该应用从哪个js开始去阅读和查验应用源码，从而进行打包和压缩该部分源码2.输出output类似医生针对entry该入口的病人来对症下药，是webpack打包过后的资源文件的路径和名称3.Loader组装单元类似汽车工厂，车身需要组装上灯，组装上轮子才能安全上路，loader就

module.exports={配置方式1，单入口模式entry:'./src/index.js'//entry指示webpack从那个文件作为入口开始打包，分析内部依赖图，//这是但入口配置方式，打包一个chunk,输出一个bundle,chunk的名字是默认配置方式2，多入口Array模式ent

每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦我们可以安装使用webpackdevserver来改善这块的体验启动服务后，会发现dist目录没有了，这是因为devServer把打包后的模块不会放在dist目录下，而是放到内存中，从而提升速度安装：npminstallwebpack-dev-server-D修改下packa

1、初始化npminit-y之后会生成package.json文件2、安装webpacknpminstallwebpackwebpack-cli会生成node_modules目录3、安装vuenpminstallvue4、测试执行：npmrunbuild会报如下错误：解决方法：importVuefrom'vue/dist/vue.js'5、安装vue-loaderwebpac

1.使用npm下载webpack-dev-servernpmiwebpack-dev-server-D 2.配置webpack.config.js文件const{resolve}=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js'

https://github.com/webpack/analyse  在命令行中加上 --profile--json>stats.json 运行npmrunbundle，会在根目录生成一个json文件，这个文件中包含了此次打包的所有信息 看这个json文件我们肯定看不懂，我们可以用官方推荐的工具查看：https://webpack.js.org/guides

webpack配置及简单案例文件和文件夹解析：dist文件夹：用于存放之后打包的文件。src文件夹：用于存放源文件。main.js：项目的入口文件。mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。index.html：浏览器打开展示的首页htmlpackage.json：通过npminit生成的

1.使用npm下载pluginnpmihtml-webpack-plugin-D 2.配置webpack.config.js文件/*webpack配置文件，作用：指示webpack怎么干活，干哪些活当你运行webpack指令的时候，会加载其中的配置所有的构建工具都是基于Node.js来运行的，模块化使用的CommonJS*///插件：1

1.使用npm下载组件npmifile-loader-Dnpmiurl-loader-D 2.配置webpack.config.js文件const{resolve}=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js',

plugin可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念。 在之前我们使用loader的时候，我们打包后还需要自己手动在打包后的文件夹中创建一个index.html文件，并且这个文件中引入打包后的js，非常麻烦，所以就有了下面这个插件。 一、HtmlWebpackPlugin

Plugin:开始打包，在某个时刻，帮助我们处理⼀些什么事情的机制plugin要比loader稍微复杂一些，在webpack的源码中，用plugin的机制还是占有非常大的场景，可以说plugin是webpack的灵魂。 设计模式事件驱动发布订阅  plugin是一个类，里面包含一个apply函数，接受一个参数，compiler（里面

首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,package.json，webpack.config.js代码如下：varname=require('./index1.js')console.log('我是入口js文件')console.log(name)module.exports="我不

直接说正题，webpack上html-loader和html-webpack-plugin冲突错误代码:html-webpack-plugin插件配置plugins:[//html-webpack-plugin：默认会创建一个空的html文件，自动引入打包输出的所有资源（JS/CSS）//需要有结构的HTML文件可以加一个templatenewHtmlWebpackPlu

Linux下ElectronloadURL报错ERR_FAILED(-2)Notallowedtoloadlocalresource背景使用electron-vue的时候，窗体创建后加载页面使用的是loadURL函数，并且传入的参数形如：`file://${__dirname}/index.html`PS：在electron-vue中，编译打包后的__dirname是asar所在绝对地址/dist/e