学习前端Vue之前最好掌握的技术——webpack【前端必备、快速入门】

目录（快速搜索） webpack基础1webpack模式2webpack配置文件webpack.config.js3webpack 打包html资源4打包css资源5打包less和sass资源6提取css为单独文件7打包图片资源8打包其他资源

webpack基础

将JavaScript文件打包在一起，打包好的文件用于浏览器中使用，也可以胜任转换、打包、包裹任何资源。

例如:js文件压缩了吗,html空格去除了吗？浏览器的兼容问题等（js文件里手动配置）

打包过程被 *** 作的模块文件叫做chunk，bundle是最后打包的文件，bundle大部分情况是多个chunk的集合。

1webpack模式

执行webpack --mode development （开发模式）

webpack --mode production（生产模式）

项目中会产生dist文件夹，webpack作用就是讲src中多个js文件打包到dist下main.js中

2webpack配置文件webpack.config.js

把配置写在webpack.config.js中，在终端就可以使用webpack

配置文件webpack.config.js中可以设置入口、出口、模式等。目的是为了提高效率、减少指令。

比较完整的webpack.config.js文件如下：

entry 多入口可以是数组，例如;

entry：‘./src/index.js’

entry:【‘./src/index.js’,‘./src/main.js’】，

entry:{

//对象

one:‘./src/index.js’

two:‘./src/main.js’

},

3webpack 打包html资源

使用插件html-webpack-plugin

引用插件

const Html-webpack-plugin =require(‘html-webpack-plugin’)

webpack 打包多个html资源

有几个html在插件中就new几个html-webpack-plugin

为解决html 压缩后使用多个js打包后的chunk，可以在webpack文件plugin配置中添加一行代码：chunk：【‘。。。’，‘。。。’】 指定chunk

4打包css资源

5打包less和sass资源

css可以使用，但在大型项目中不好用，原因是css是固定的属性，不利于维护修改，为解决这个问题要使用sass、less，可以把颜色、外形等网页的属性设置动态变化的。

写的是sass、less，要编译成CSS才能使用。

sass、less需要使用npm下载sass、less包和sass-loader、less-loader

设置属性

sass：

$width:

$heigt:

less:

@width:

@heigt:

webpack都会把css、less、sass打包到头部文件（head /head）。

6提取css为单独文件

由于浏览器的兼容性问题，css的属性需要一个个修改，使用postcss可以一次性地解决这个问题。

“mini-css-extract-plugin”插件提取成单独的css文件。

压缩css

7打包图片资源

法一、在css中使用，

法二、webpack打包使用。

html-loader可以解决图片在css处理后名称改变而无法显示的问题，使用html-loader，打包后在build下build/html会自动将路径更新。

8打包其他资源

iconfont 有许多图标可以使用

在head style中使用iconfont

页面中使用

​