webpack打包的基本使用

 

1. 配置打包的入口与出口

 

webpack的4.x版本中默认约定：

打包的入口文件为src -> index.js

打包的输出文件为 dist -> main.js

 

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息：

 

 

 

 

2. 配置webpack自动打包功能

1. 运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具

2. 修改package.json -> scripts中的dev命令下：

 

3.  将src->index.html 中，script脚本的引入路径，修改为 “/buldel.js”

4. 运行npm run dev 命令，重新进行打包

5. 在浏览器中访问http://localhost:8080地址，查看自动打包效果

 

注意：

• webpack-dev-server  会启动一个实时打包的http服务器
•  webpack-dev-server  打包生成的输入文件，默认放到项目根目录中，而且是虚拟的、看不见的

 

 

 

 

 

3.  配置html-webpack-plugin生成预览界面

1. 运行 npm install html-webpack-plugin -D命令，安装生成预览页面的插件

2. 修改webpack.config.js 文件头部区域，添加如下配置信息：

 3. 修改 webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

 

 

 

 

 

4. webpack-配置自动打包相关的参数

配置自动打包相关的参数

 

 

 

 

5. webpack中的加载器介绍

1. 通过loader打包非js模块

在实际开发中，webpack默认只能打包处理以 .js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否者会报错！

 

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

• less-loader 可以打包处理 .less相关的文件
• sass-loader可以打包处理 .scss相关的文件
• url-loader可以打包处理css 中与url的相关文件

 

loader的调用过程

 

 

 

 

6.   webpack加载器-打包处理css文件

1. 运行 npm i style-loader css-loader -D 命令，安装处理css文件的loader
2. 在webpack.config.js的module -> rules 数组中，添加loader规则如下：

 

 

 其中，test表示匹配的文件类型，use表示对应要调用的loader

注意：

• use数组中指定的loader顺序是固定的

 

 

 

 

 

7. webpack加载器-打包和处理less文件

1. 运行npm i less-loader less -D 命令
2. 在webpack.config.js的module -> rules 数组中，添加loader规则如下：

 

 

 

 

 

 

 

8.  webpack加载器-打包和处理scss文件

打包处理scss文件

运行 npm i sass-loader node-sass -D 命令

在webpack.config.js 的module -> rules 数据中 ，添加loader 规则如下：

如果有错误，就报npm切换到淘宝的地址下载，查看npm config get registrys是不是https://registry.npm.taobao.org/，再用cnpm下

 

 

 

 

 

 

 

9. 配置postCSS自动添加css兼容前缀

1. 运行npm i postcss-loader autoprefixer -D 命令
2. 在项目根目录中创建 postcss 的配置文件 postcss.config.js ，并初始化如下配置：

 

 在 webpack.config.js 的module -> rules 数组中， 修改css的 loader 规则如下：

 

 

 

 

 

 

 

 

10. webpack加载器--打包样式表中的图片和字体文件

运行 npm i url-loader file-loader -D 命令

在webpack.config.js的module -> rules 数组中，添加 loader 规则如下：

 

•  其中 ？之后的是 loader 的参数项
• limit 用来指定图片的大小，单位是字节byte ，只有小于limit 大小的图片，才会被转为 base64图片

 

 

 

 

11. webpack加载器-打包处理js文件中的高级语法

1. 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
2. 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3. 在项目根目录中，创建babel配置文件 babel.config.js 并初始化基本配置如下：

 

 4. 在webpack.config.js 的module -> rules 数组中，添加loader规则如下：