模块打包工具
为什么使用模块打包工具？
- ES Modules存在环境兼容问题
- 模块文件过多，网络请求频繁
- 所有的前端资源都需要模块化
-
新特性代码编译
-
模块化JavaScript打包
-
多类型模块支持
-
Webpack
模块加载器(Loader)
代码拆分(code Splitting)
资源模块(Asset Module)
Webpack快速上手
初始化项目，生成package.json
- yarn init --yes
安装webpack
- yarn add webpack webpack-cli --dev
安装webpack4出现问题
- 在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。
- 解决方法：尝试全局安装npm install -g webpack-cli
- 执行webpack -v成功执行 不再提示安装webpack-cli
查看webpack版本
- yarn webpack --version
创建入口文件 main.js
- 将多个模块导入到这一个模块中
打包js代码
- yarn webpack
webpack配置文件(webpack.config.js)
项目根目录下新建webpack.config.js文件
- 默认输出：dist / main.js
自定义输出和输入
- 代码展示
// webpack.config.js文件-----------------
const path = require('path');
module.exports = {
// 需要打包的入口文件
// 可以写相对路径
entry: './src/main.js',
// 需要输出的指定文件夹和文件名
output: {
filename:"bundle.js",
// 只能写绝对路径
path:path.join(__dirname,'output')
}
}
注意
- 打包的入口文件,可以使用相对路径.
- 导出的path只能写绝对路径.
webpack工作模式(3种)
命令行举例: yarn webpack --mode none
- 传入--mode的参数,有三个取值
- production 生产模式
- development 开发模式,wepack会自动优化打包的速度.
- none webpack 运行最原始的打包,不会做任何的优化.
- 这三种模式的差异,可以在webpack.js.org/configurati…
配置文件中设置工作模式
const path = require('path');
module.exports = {
// 添加工作模式,那么命令行中只需要输入: yarn webpack
mode:'development',
// 需要打包的入口文件
// 可以写相对路径
entry: './src/main.js',
// 需要输出的指定文件夹和文件名
output: {
filename:"bundle.js",
// 只能写绝对路径
path:path.join(__dirname,'output')
}
}
webpack打包结果运行原理
- 打包到一个文件中,还要保持每个模块有自己单独的作用域.
- 将多种文件打包到一个文件中去，并加密
小技巧
- ctrl+k -> ctrl+0 折叠所有的代码
- webpack -w 实时监听，打包新的文件
webpack资源模块加载
- Loader是Webpack的核心特性
- 借助于Loader就可以加载任何类型的资源
打包css文件
- 执行yarn webpack 会报错,因为默认认为是js文件
- 不同的loader处理不同的文件
1.安装loader模块加载器
- 处理css,执行: yarn add css-loader --dev
2.修改配置文件中的module
- 修改配置文件(添加module)
const path = require('path');
module.exports = {
// 添加工作模式,那么命令行中只需要输入: yarn webpack
mode:'development',
// 需要打包的入口文件
// 可以写相对路径
entry: './src/main.css',
// 需要输出的指定文件夹和文件名
output: {
filename:"bundle.css",
// 只能写绝对路径
path:path.join(__dirname,'output')
},
// 新添加的
module: {
rules: [
{
//指定匹配什么后缀的文件,使用正则表达式
test:/.css$/,
//指定:要使用的loader
use:'css-loader'
}
]
}
}
3.安装另一个loader
- 执行命令:yarn webpack,打包成功，但是在浏览器，发现页面并没有效果
- 还需要添加执行loader , yarn add style-loader --dev
4.配置文件中添加需要使用的加载器名称
- 修改配置文件,给module中的rules中的use添加
// 注意loader是从后往前执行的,因此,一定要将css写在后面
use:[
'style-loader',
'css-loader'
]
- 总结:样式是通过head的style标签运行的
- css-loader是将css装载到javascript
- style-loader是让javascript认识css
webpack导入资源模块
- webpack的入口文件，一般都是js文件
- 在入口文件中，导入想要打包的资源（例如:css等）
js驱动整个前端应用
- 逻辑合理，JS确实需要这些资源文件。
- 确保上线资源不缺失，都是必要的。
Webpack文件资源加载器
- 大多数加载器，都是像css-loader那样，将资源模块转换为js代码的实现方式工作。
File-loader
步骤（07_file-loader）
- 1.安装File-loader文件加载器: yarn add url-loader --dev
- 2.入口函数中引入资源
- 3.执行wepack命令
- 4.在浏览器查看效果
- 如果没有效果，打开控制台查看错误
- 发现图片的路径不对
- 源代码
//-----------main.js入口文件-----------
// 引用的是图片的地址
import icon from './编译代码.png';
var img = new Image();
img.src = icon;
document.body.append(img);
// ---------webpack-config.js-----------
// webpack配置文件
const path = require('path');
module.exports = {
mode:'none',
entry:'./img/main.js',
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js',
publicPath:'dist/'
},
module:{
rules:[
{
test:/.png$/,
use:[
'file-loader'
]
}
]
}
}
图片路径不对的原因
- webpack默认是将打包后的文件放置在项目的根目录下面
- 但是此时，我们修改了配置文件中的path路径，将其放在了dist目录下，因此找不到
- 那么此时，只需要修改配置文件中publicPath
- 注意：千万不要忘记最后的**/**,因为打包后的js文件中，是将图片的路径直接拼接在后面的。
- 再次运行，就可以成功显示了。
Webpack URL加载器
Webpack 常见加载器分类
编译转换加载器
- css-loader: 将css代码转化成为bundle.js中的一个模块，从而实现通过js运行css。
文件操作类型加载器
- file-loader: 会把就加载到的资源模块，拷贝到输出的目录，同时将文件的路径向外导出。
代码检查类型加载器
- 目的：统一代码风格，提高代码质量。
- eslint-loader
