网页中常见的静态资源：js:.js.jsx.coffee.ts(TypeScriptC#-likelanguage)css:.css.less.sass.scssImages:.jpg.png.gif.bmp.svgFonts:.svg.ttf.eot.woff.woff2Template:.ejs.jade.vue网页中引入较多的静态资源会减慢网页的加载速度（会发起很多二次请求），复杂依赖webpack概念：是一款基于node.js开发的前端自动化构建工具，可以完美实现资源合并、打包、压缩等功能。它可以自动寻找浏览器无法识别的语言并进行兼容处理。默认情况下只能打包jswebpack的核心概念：entry。Webpack执行构建的第一步会从Entry开始，可以抽象为input。Module：模块，在Webpack中一切都是模块，一个模块对应一个文件。Webpack会递归地从配置的Entry中查找所有依赖的模块。Chunk：代码块，一个Chunk由多个模块组成，用于代码合并和拆分。Loader：模块转换器，用于将模块原有的内容按要求转换成新的内容。Plugin：扩展插件，在Webpack构建过程的特定时刻注入扩展逻辑，改变构建结果或做你想做的事。Output：输出结果，Webpack经过一系列处理得到最终想要的代码后输出结果。mode：模式，选择development或者production配置webpack环境：1.全局安装npminstallwebpackwebpack-cliwebpack-dev-server-g。2.创建项目文件夹，例如文件夹名称为vue，并在文件夹Folder中创建两个文件，分别是dist和src3，输入命令npminit-y，初始化文件包，会得到一个package.json文件生成的，注意不要随意修改这个文件，然后在下一步进行配置4.安装相应需要的模块，比如npmijquery-S安装jQuery5，在根目录下创建webpack.config.js文件文件包，在src中创建main.js和index.html文件，分别编写相应的调试代码。6、配置webpack.config.js文件7、修改package.json的配置--open设置自动打开项目--port3000指定端口为3000--contentBasesrc指定启动的根目录，它根目录下会自动打开index.html文件，激活过程比较繁琐。推荐使用html-webpack-plugin插件配置启动页--hot开启浏览器热更新8.运行npmrundev，会自动打开index.html，不会在dist中directory看到bundle.js，但是在index.html中引入，就会生效，那么打包成功，这里bundle.js是直接托管在内存中的电脑，虽然看不见，但它确实存在。它与dist*html-webpack-plugin插件配置处于同一级别：1.运行npmihtml-webpack-plugin--save-dev安装到开发依赖2.在webpack.config.js文件中你需要先引入模块，再配置。注意我们前面安装的webpack是全局的，这里会报错是因为本地找不到webpack，所以可以执行npminstallwebpack来安装本地包。在webpack.config.js中加入如下代码改变filename的值，检查物理磁盘上的页面和内存中的页面的区别，并在html文件body底部发送一个script标签内存盘，并引入bundle.js，这样物理页面的页面就可以注释掉，不会影响页面效果，即使用html后-webpack-plugin插件，不需要手动处理bundle.js的引入，插件会自动帮我们创建脚本标签，引入正确的bundle.js并使用webpack打包css：webpack只能打包js文件，打包其他文件需要安装其他模块1.运行npmistyle-loadercss-loader--save-dev2.修改webpack.config.js文件的配置使用webpack打包less：（sass包装类似于lessnpmisass-loadernode-sass--save-dev)1.运行npmiless-loaderless-D2。修改webpack.config.js文件配置使用webpack打包url地址文件：1.运行npmiurl-loaderfile-loader--save-dev2.修改webpack.config.js文件配置{test:/.jpg|png|gif|jpeg$/,use:'url-loader'}//图片路径处理规则webpack.config.js文件的配置
