随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如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="我不