Webpack学习笔记

Webpack

基本概念

 

使用步骤

 

 

 

在package.json中添加一个自定义的命令 ”script ” ：{“build”: ”webpack”}

案例：将两个js文件打包为一个js文件

 

注意：两个js文件中的一个必须存在于 src 文件夹内的 index.js ，因为webpack默认会去项目中的 src 文件夹中寻找 index.js 文件，就相当于是webpack打包的入口 

yarn build命令报错解决办法

在自定义命令中添加如下指令 

 

 更改webpack的入口和出口

带单引号的项都可以进行自定义 

 打包流程

这里说的配置文件指的是 webpack.config.js 文件

需要打包的文件必须要跟入口文件产生联系，webpack才能执行打包操作

 自动生成HTML文件

注意：module.exports 在webpack.config.js中只能出现一次 

 打包css文件

在js文件中用 import 引入 css 文件的写法

直接写 css文件 的相对路径即可（css文件所在的文件夹一般放在webpack入口文件所在的根目录里），注意：一定要写扩展名，webpack.config.js通过扩展名才能寻找到对应的文件。

 

默认webpack只识别js文件，必须要使用 css-loader 和  style-loader 这两个包，配置文件如上图所示。

注意：这两个加载器的执行顺序是从后往前执行，先执行css-loader，再执行style-loader。

 打包less文件

 Webpack处理图片

 通过使用资源模块（vue指南中可找到）

 对于asset参数的解释：

asset 会根据图片的大小来判断是否需要将图片转成base64格式的文件（转成字符串打包进js文件里），或是直接将图片作为一个单独的文件发送至打包的出口目录下

Webpack处理字体图标

 注意：引入的外部资源都要放在 assets 文件夹内

Webpack babel和 babel-loader

 Webpack开发服务器

 Webpack的使用理念

所有的文件都正常使用，在整个项目完成后，再通过webpack.config.js配置相关的环境进行打包。