01 - webpack简介
- 是一款静态 javascript 应用程序的打包工具。
- 翻译压缩代码; 降级(支持低级语法)
- 减小代码包体积, 让浏览器更快速打开网页
- 前提安装 node 并在项目初始化 npm init -y, 生成文件 package.json
02 - 安装使用 webpack
- webpack是一个工具,对于所有的项目都可以来使用,从这个意义上来讲,它是可以去全局安装的,但是,考虑到不同的项目中可能使用了不同的webpack版本。所以在这里我们选择: npm i webpack webpack-cli -D
- 验证是否安装成功: npx webpack -v; 如果成功会显示版本号。
03 - 配置一些基础项 1)
const path = require('path')
module.exports = {
// mode: 'development', // 打包方式
mode: 'production', // 打包方式
entry: './src/js/main.js', // 入口
output: { // 出口
"path": path.join(__dirname, "webxlt"), // 绝对路径
"fileName": "webxlt.js"
}
}
- development :开发模式(代码不会压缩 混淆); production:生产模式(压缩,混淆,加密… 不可读)
03 - 打包的配置文件
- 例如: 命名一个为: webpack.dev.js 的文件在里面书写 webpack 打包的配置文件; 当然文件名是自己定义的
- 运行命令: npx webpack 入口文件 --config (webpack的配置文件名); 如果是为上述文件名那么示例如下: npx webpack (路径文件名) --config webpack.dev.js ./index.js
03 - 简化打包命令
- 在 package.json 文件里
"scripts": {
"dev": "webpack --config webpack.dev.js",
"build": "webpack index.js",
"test": "echo "Error: no test specified" && exit 1"
}
在文件下的命令行 npm run dev 就可执行上述命令
03 - loader 介绍及使用
- 因为 webpack 只能打包 javascript 的模块, 对于 css img 等文件是不具备打包功能的, 那么顺应条件 loader 的一系列包就产生了其中有:
- 安装: 打包普通 css 的 loader:
npm i css-loader style-loader -D
这两个包; less 则需要在下载一个:npm i less-loader -D
; less-loader:用来加载less文件,并处理成css; css-loader:用来加载css文件; style-loader:用来将css代码以style标签的格式插入到html文件中; 修改图片的包: asset-module 一般来说现在的 webpack 已经支持 图片的打包之前的版本是不支持的; - 使用: 修改 webpack.config.js 文件,添加 module: 如下
module: {
rules:[ // 规则
{
// 当遇到以 css 结尾的文件的时候就去找 css-loader 这个包
test: /\.css$/, // 正则测试
// 如果有多个 loader, 执行顺序是从右到左
// 先执行 css-loader ----> 在 style-loader
// css-loader 让 webpack 识别 css
// style-loader: 把 css 写在 style 标签中, html 才会有样式效果
use: ['style-loader','css-loader'] // loader
},
{
// 当遇到以 css 结尾的文件的时候就去找 css-loader 这个包
test: /\.less$/, // 正则测试
use: ['style-loader','css-loader','less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
}
]
}
它是与打包方式、入口、出口的配置是同级的
03 - plugin 插件的介绍及使用
- plugin, 中文就是插件。它可以用来增强webpack的功能官网: www.npmjs.com/package/htm…
- 安装命令:
npm i html-webpack-plugin -D
- 使用:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html', // 打包后生成的 html 文件名
template: path.resolve('./index.html') // 指定模块的位置
})
]
03 - webpack-dev-server webpack 实时打包工具
- 介绍: 实现实时打包预览效果。当我们修改了代码时,立即运行打包命令,并显示效果。注意: 浏览器看到的实时效果是服务器通过“内存”提供的,没有物理文件,也不会生成dist目录
- 使用:
devServer: {
host: '127.0.0.1', // 配置启动ip地址
port: 10088, // 配置端口
open: true // 配置是否自动打开浏览器
}
在 package.json 加入一个配置项:
"scripts": {
"dev": "webpack-dev-server",
},