1.什么是webpack?
- webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
静态:文件资源
模块:node环境,引入文件,遵守模块化语法
2.webpack有什么功能?
- 代码合并:将多个文件合并成一个
- 翻译:将高级语法,自动降级,方便浏览器兼容
- 压缩:将空格和注释等浏览器不需要的代码删除
3.操作顺序
- 安装node
- 创建一个package.json(npm init 初始化项目)
- 在当前项目安装并使用webpack
安装命令:npm i webpack webpack-cli -D // --save-dev
检测安装是否成功命令:npx webpack -v
打包命令:npx webpack 文件名
- 实际操作
main.html
<div id="app"></div>
<script src="./dist/main.js"></script>
main.js
import { updateDom } from './tool.js'
updateDom('app', 'main.html')
tool.js
export const updateDom = (id, content) =>{
window.document.getElementById(id).innerHTML = content
}
4.配置文件
- 自已创建一个webpack.js的文件，用它来做配置文件。
webpack.config.js
// 引入nodejs中的核心模块
const path = require('path')
console.log(path.join(__dirname, '/build'))
module.exports = {
mode: "production",
entry: './src/js/main.js', // 入口文件
output: {
"path": path.join(__dirname, '/build'), // 决定出口文件在哪里
"filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫 main.js
}}
5.简化打包命令
package.json
"scripts": {
"dev": "webpack --config webpack.dev.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
6.loader的使用
webpack默认只处理js,而处理其他就需要使用loader
- 处理css文件
1.安装
安装命令:npm i css-loader -D
npm i style-loader -D
2.配置webpack.config.js中的module
代码实现:
rules:[ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader','css-loader'] // loader
}
]
}
}
tip:在有多个loader的情况下，use数组中的loader执行顺序是从右到左的过程。
- 处理less文件
1.安装命令:npm i less-loader less -D
2.配置webpack.config.js中的rules
代码实现:
module.exports = {
// 非js模块，在这里处理
module: {
rules: [ // 规则
其他...,
{
test: /\.less$/, // 正则匹配，以.less结尾的文件
use: ['style-loader','css-loader','less-loader'] // 匹配成功，使用指定的loader
}
]
}
}
- 处理资源文件
- 第一种处理
在style.css中引入图片，作为div标签的background。
background-image: url('xxx')
- 第二种处理
在src/main.js中，通过代码 - 把**大图**插入到创建的img标签上, 添加body上显示
1.// 引入图片-使用
import imgUrl from '../img/webpack.png'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)
2.配置webpack.config.js中的rules
其他...,
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
}
7.plugin的使用
plugin，中文就是插件。它可以用来增强webpack的功能。
- html-webpack-plugin处理
- 作用:把我们自已写的.html文件复制到指定打包出口目录下，并引入相关的资源代码。
1.安装命令:npm i html-webpack-plugin -D
2.配置在webpack.config.js中操作
2-1:引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
2-2:添加一个plugins配置
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html',
template: path.resolve('./index.html') // 指定模块的位置
})
]
}
- clean-webpack-plugin 处理
- 作用:在生成打包文件之前，把目录清空掉
1.安装命令:npm i clean-webpack-plugin -D
2.配置在webpack.config.js中操作
2-1:引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
2-2:添加plugins
plugins:[
new CleanWebpackPlugin()，
其它...
]
8.webpack实时打包
- 作用:实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。
- 注意点:
-
- 项目开发都是对src目录内部的文件进行更新,不要去修改dist打包好的文件
-
- 对src文件修改操作后,都需要重新打包,才能看到对应效果
1.安装命令:npm i webpack-dev-server -D
2.配置:在webpack.config.js中操作
module.exports = {
// 其他省略....
// 配置 webpack-dev-server的选项
devServer: {
host: '127.0.0.1', // 配置启动ip地址
port: 10088, // 配置端口
open: true // 配置是否自动打开浏览器
}
}
3.在package.json中补充一个script
"scripts": {
"dev": "webpack-dev-server",
// 它默认会找webpack.config.js文件
"build": "webpack-dev-server --config webpack.config.js"
// 指定使用webpack.config.js配置文件文件
},
4.启动命令:npm run dev
9.loader与plugin的区别 1 不同的作用
loader直译为"加载器"。webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。
2 不同的用法
Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
