糖衣

入口起点指示webpack应该使用那个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找到哪些模块和库是入口起点（直接和间接）依赖的。出口属性告诉webpack在哪里输出它所创建的文件，以及如何命名这些文件。webpack-dev-server是webpack官方提供的一个小型的express服务器。使用它可以为webpack打包生成的资源文件提供web服务，以及自动刷新和热替换。

Webpack可以看做是模块打包机：它做的事情是，分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（如less、sass、ts等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，webpack还肩负起了优化项目的责任，即Webpack完成的任务有：打包：可以把多个JavaScript文件打包成一个文件，减少服务器和下载带宽。转换：把拓展语言转换成普通的JavaScrip

css 打包要依赖 style-loader 和 css-loader 来解析。syle-loader 是用来处理 css 文件中的 url() 等。css-loader 是用来将 将 css 以 style 标签的形式 插入到 head 标签下，如果想将 css 单独提取出来，需要使用 extract-text-webpack-plugin 插件。

1、loader   Loader是webpack最重要的功能之一。Loader让webpack能够处理不同的文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力，对他们进行处理。本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。   例如， loader可以将sass，less文件的写

1、css中图片处理  若在css中将图片以背景的方式展示时，如：#img{ background-image: url(../imgages/img.png); } 此时，需要使用file-loader， url-loader 来处理。如过未使用loader将会报错： 安装：npm install --save-dev file-loader url-loaderfile-loade

使用less-loader 将less 文件打包与分离，使用sass-loader将sass 文件打包与分离。CSS3中有些属性需要加前缀，若自己查询并添加前缀比较麻烦，可以使用 postcss-loader 给 常css3 属性自动添加前缀。随着项目的进展，CSS也会越来越多，有时需求更改，带来了DOM结构的更改，这是若不关注css样式，会造成css的冗余。使用 PurifyCSS 可以消除未使用的css。