1. 简述
webpack工具底层是基于node.js, 所以在开始之前确保本地已安装了node.js
2. webpack安装及配置
2.1 安装
npm init -y
npm install webpack webpack-cli --save-dev
安装成功之后, 可以通过下面的命令检查一下版本
./node_modules/.bin/webpack -v
2.2 配置
在根目录下面新建一个webpack.config.js文件
'use strict'
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
},
mode: 'production',
}
说明:
-
entry:打包入口; -
path:打包后文件存放的文件位置; -
filename:打包压缩生成的文件名; -
mode:开发环境 -
__dirname:node.js中的一个全局变量，它指向当前执行脚本所在的目录
2.3 打包
在package.json文件中添加如下build命令, 如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
此时当我们在控制台输入npm run build就会将src/index.js文件进行打包, 在根目录生成一个dist文件夹, 下面有一个名为index.js的文件
然而这个时候我们页面并不能看到实际的效果, 现在试着写点内容
-
src/index.js
[图片上传失败...(image-c2923e-1629124001152)] - 重新打包
npm run build - 在
dist文件下新建一个index.html文件, 引入打包后的index.js, 内容如下
- 在浏览器中打开
index.html文件, 展示如下
3. webpack解析
3.1 解析es6
- 在
src文件下新建一个test.js, 内容如下
- 在
index.js文件中引用, 如下
image.png
-这时候, 我们再重新打包一下试一下
我分别在IE和Chrome两个浏览器打开了index.html文件, 结果却是截然不同的; 这是因为import, 箭头函数, 模板字符串都是ES6语法, 浏览器可以解析原生JS, 但是部分浏览器是解析不了ES6语法
这时候就需要推出一个新的概念: loaders
所谓 loaders 就是说把原本 webpack 不支持加载的文件或者文件内容通过 loaders 进行加载解析，实现应用的目的
我们这里需要使用到的loaders是babel-loader, babel-loader又依赖babel
先来安装一下依赖
npm i @babel/core @babel/preset-env babel-loader -D
在根目录新建一个.babelrc文件, 配置如下
{
"presets": [
"@babel/preset-env"
]
}
webpack.config.js文件也需要添加module属性，属性内容是一个rules集合，内容如下
这个时候我们再重新打包一下试试看, myFun函数返回的内容就能被成功解析了
3.2 webpack 加载 css、less 等样式文件
3.2.1 解析css文件
现在我们基于上面的内容调整一下src文件下的代码, 新增一个index.css文件
// index.css
.text {
font-size: 20px;
color: green;
}
// test.js
const myFun = () => `<div class="text">css样式</div>`
export { myFun }
// index.js
import { myFun } from './test.js'
import './index.css'
document.write(myFun())
如果此时, 执行打包命令npm run build, 终端就会报错, 提示我们需要添加对应的loader来处理不能被编译的文件
这里解析 css 文件需要用到两个loader, 分别是style-loader, css-loader
css-loader用于加载 css 文件并生成 commonjs 对象，style-loader 用于将样式通过 style 标签插入到 head 中
- 安装
npm i style-loader css-loader -D
-
webpack.config.js配置
module: {
rules: [
//...
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
use 对象里是个数组，需要格外注意到 loader 顺序，是先写 style-loader，再写 css-loader, 但是执行的时候是先加载 css-loader，将 css 解析好后再将 css 传递给 style-loader
- 展示
3.2.2 解析less文件
解析less文件也是一样的, 我们现在把index.css改成index.less文件, 重新打包的时候照样会提示我们没有loader来解析index.less这个文件
- 安装
less相关依赖
npm i less less-loader -D
- 添加
less文件解析配置
module: {
rules: [
//...
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
完成以上步骤之后, 我们会发现打包之后效果是一样的
注意, 我安装完之后打包, 报错了, 百度之后, 是
less-laoder版本过高,替换成低版本之后就可以了
3.3 webpack加载图片
我们在src目录下面放一张图片, 并修改一下我们的样式
3.3.1 file-loader
- 安装依赖
npm i file-loader -D
- 添加配置
module: {
rules: [
//...
{
test: /.(jpg|png|gif|jpeg)$/,
use: 'file-loader'
}
]
}
- 打包压缩刷新之后,
dist目录下就会有我们打包过来的图片,index.html文件也展示了对应的图片
3.3.2 url-laoder
url-loader 直接内置了 file-loader，是对它的再封装，在配置文件里可以直接去掉 file，用 url 替换
- 安装依赖
npm i url-loader -D
- 添加配置
limit是图片大小的上限, 如果图片大小小于这个值, 就会这打包为base64格式, 否则打包出来的任然是图片
module: {
rules: [
//...
{
test: /.(jpg|png|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 160000,
name: 'imgs/[name].[hash].[ext]'
}
}]
}
]
}
- 我们这个时候打包完, 页面正常显示,
index.js文件里倒是多出了很多内容, 多的内容就是打包图片的base64数据
4. 插件的使用 —— HtmlWebpackPlugin
我们dist文件下index.html都是我们手动创建的, 使用HtmlWebpackPlugin插件, 打包的时候就可以自动生成
- 安装
npm install --save-dev html-webpack-plugin
- 配置
const HtmlWebpackPlugin = require('html-webpacl-plugin')
module.exports = {
//...
plugins: [
new HtmlWebpackPlugin()
],
module: {
//...
},
}
- 这个时候打包, 会有一大片的报错信息, 应该是
HtmlWebpackPlugin这个插件里有些内容与babel-loader依赖相冲突了
解决的办法是: babel-loader配置下加上exclude: /node_modules/配置，就是忽略依赖包的意思
{
test: /\.js$/ ,
use: "babel-loader",
exclude: /node_modules/
}
这个时候就可以成功打包, dist文件下就会自动生成index.html文件
5. 文件监听
文件监听是在发现源码发生变化时，自动重新构建出新的输出文件
我们上面每修改一次内容, 就手动打包一下, 着实有点麻烦, 这个时候文件监听就非常的方便了
文件监听的两种方法：
- 在
package.json文件中添加一条watch命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
执行
npm run watch
- 在
webpack.config.js配置
module.exports = {
watch: true,
entry: {...},
//...
}
执行
npm run build
开启文件监听之后, 我们修改代码, 刷新浏览器, 就直接呈现更改后的内容
6. 热更新
我们现在即使使用了文件监听, 还是需要手动去刷新浏览器更新修改内容; 而热更新的意思就是可以在编辑器上修改代码的同时，在浏览器上看到同步更新效果
wds 无刷新浏览器
wds 就是
webpack-dev-server的简称，相比前面讲的文件监听watch这种方式来说，这个方案本身不输出文件，而是放在内存中，性能更好
- 安装
npm i webpack-dev-server -D
-
package.json中添加一条命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open"
},
-
webpack.congig.js添加webpack内置插件HotModuleReplacementPlugin
const webpack = require('webpack')
module.exports = {
//...
plugins: [
new HtmlWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
contentBase: './dist',
hot: true
},
//...
}
- 执行
npm run dev
这个时候, 我们修改内容, 就会发现浏览器自动刷新, 耶
注: 本文是根据
图雀社区webpack系列内容学习, 总结的笔记, 大家可以去社区深入了解一下
