目录
(3)执行yarn bulid 自定义命令，进行打包(要确保终端路径在src父级文件夹)
四、打包html文件-使用_html-webpack-plugin插件
一、webpack认识
什么是webpack呢? 作用是什么? 目的是?
1. 它是一个模块包
2. 识别代码, 翻译, 压缩, 整合打包
3. 提高打开网站的速度
二、webpack使用步骤
1.初始化包环境
yarn init
2.安装依赖包
yarn add webpack webpack-cli -D
3.配置scripts(在package.json)
{
"name": "base",
"version": "1.0.0",
"main": "index.js",
"author": "uylee",
"license": "MIT",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"scripts":{
"build":"webpack"
}
}使用yarn build 打包压缩文件
4.webpack使用
(1)新建src文件夹
src下新建index.js和业务文件
业务js文件要导出
add.js
export const addFn = (a, b) => a + b;tool.js
export const getArrSum = (arr) => arr.reduce((sum, val) => (sum += val), 0);
(2)index.js 引入业务模块
//webpack打包的入口
import { addFn } from "./add/add";
import { getArrSum } from "./tool/tool";
console.log(add(5, 2));
console.log(getArrSum([6, 12, 45]));(3)执行yarn bulid 自定义命令，进行打包(要确保终端路径在src父级文件夹)
二、webpack修改出口和入口
在webpack.config.js文件修改
配置文档: https://webpack.docschina.org/concepts/#entry
const path = require("path");
module.exports = {
entry: "./src/main.js", //入口
output: {
//出口
path: path.resolve(__dirname, "dist"), //出口路径文件夹名字
filename: "bundle.js", //出口文件名字(代码打包进这里)
},
};src下的入口文件要重命名为main.js
运行yarn build后会自动生成打包文件
三、案例-隔行变色
新建业务index.html
<ul id="myUL">
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>导入jquery，写入js代码
// 1.yarn add jquery
// 2.public/index.html
// 3.入口处引入jquery
import $ from "jquery";
$("#myUL>li:odd").css("color", "red");
$("#myUL>li:even").css("color", "green");导入jquery后，package.json里有记录
四、打包html文件-使用_html-webpack-plugin插件
配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/
1.下载插件
yarn add html-webpack-plugin -D
2. webpack.config.js添加配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js", //入口
output: {
//出口
path: path.resolve(__dirname, "dist"), //出口路径文件夹名字
filename: "bundle.js", //出口文件名字(代码打包进这里)
},
plugins: [
new HtmlWebpackPlugin({
//plugins插件配置
template: "./public/index.html", //告诉webpack使用插件时，以我们自己的html文件作为模板去生产dist/html文件
}),
],
};3.终端运行yarn build
五、打包css文件-webpack-使用加载器
css-loader 文档: https://webpack.docschina.org/loaders/css-loader/
style-loader文档: https://webpack.docschina.org/loaders/style-loader/
css-loader 让webpack能处理css类型文件， style-loader 把css插入到DOM中
1.下载加载器
yarn add css-loader style-loader -D
2. webpack.config.js配置
module.exports = {
module: {
// 加载器配置
rules: [
// 一个具体的规则对象
{
test: /\.css$/i, // 匹配.css结尾的文件
use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
// 从右到左的, 所以不能颠倒顺序
// css-loader: webpack解析css文件-把css代码一起打包进js中
// style-loader: css代码插入到DOM上 (style标签)
},
],
},
};3.新建css文件
4.在入口文件main.js中导入css文件
// 导入css文件
import "./css/index.css";5.终端运行yarn build
六、打包less文件-less-loader加载器
less-loader文档: https://webpack.docschina.org/loaders/less-loader/
less-loader作用: 识别less文件， less 作用: 将less编译为css
1.下载插件
yarn add less less-loader -D
2. webpack.config.js配置
module.exports = {
module: {
// 加载器配置
rules: [
// 一个具体的规则对象
{
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};3.新建less文件
4.在入口文件main.js中导入less文件
//导入less文件
import "./less/index.less";5.终端运行yarn build
七、处理图片文件
webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader
文档: https://webpack.docschina.org/guides/asset-modules/
以前用url-loader和file-loader来处理， 现在webpack.config.js – 针对图片文件设置type: “assets“
1.在webpack.config.js配置
module.exports = {
module: {
// 加载器配置
rules: [
// 一个具体的规则对象
{
// 图片文件的配置(仅适用于webpack5版本)
test: /\.(gif|png|jpg|jpeg)/,
type: "asset", // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
// 如果你设置的是asset模式
// 以8KB大小区分图片文件
// 小于8KB的, 把图片文件转base64, 打包进js中
// 大于8KB的, 直接把图片文件输出到dist下
},
],
},
};2.新建图片文件
3.在less或css中使用图片
@size:30px;
li{
font-size: @size;
}
body{
background: url(../assets/logo_small.png) no-repeat center;
}4.main.js中引入图片文件
//引入图片文件
import imgObj from "./assets/1.gif";
let theImg = document.createElement("img");
theImg.src = imgObj;
document.body.appendChild(theImg);八、打包字体图标
1.在webpack.config.js配置
module.exports = {
module: {
// 加载器配置
rules: [
// 一个具体的规则对象
{
// 配置字体图标
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: "asset/resource", // 所有的字体图标文件, 都输出到dist下
generator: {
// 生成文件名字 - 定义规则
filename: "fonts/[name].[hash:6][ext]", // [ext]会替换成.eot/.woff
},
},
],
},
};
2.新建字体图标文件
3.main.js中引入字体图标
//打包字体图标
import "./assets/fonts/iconfont.css";
let theI = document.createElement("i");
theI.className = "iconfont icon-qq";
document.body.appendChild(theI);九、babel降级js语法-加载器
babel官网: https://www.babeljs.cn/ babel-loader
文档: https://webpack.docschina.org/loaders/babel-loader/
babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法，
babel-loader: 可以让webpack转译打包的js代码
1.下载加载器
yarn add babel-loader @babel/preset-env webpack -D
2.在webpack.config.js配置
module.exports = {
module: {
// 加载器配置
rules: [
// 一个具体的规则对象
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
use: {
loader: "babel-loader", // 使用这个loader处理js文件
options: {
// 加载器选项
presets: ["@babel/preset-env"], // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
},
},
},
],
},
};3.main.js中写入
//bable降级js语法
const fn = () => {
console.log("箭头函数");
};
console.log(fn);4.终端运行yarn build
十、webpack开发服务器
webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/
1、下载模块包
yarn add webpack-dev-server -D
2、在package.json中加入
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},3.启动当前工程里的webpack开发服务器
yarn serve
在浏览器中打开http://localhost:8888/可浏览自己写的网页
4.重新编写代码，观察控制台和浏览器是否自动打包和更新
5、修改服务器端口号,默认8080
module.exports = {
// 改变开发服务器端口号
devServer: {
port: 8888,
},
};
4698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
