webpack的概念:
webpack是一个现代js应用程序的静态模块打包器。
理解webpack的四个核心概念:
- 入口(entry):webpack以哪个文件为入口,来作为构建内部依赖图的开始。
- 输出(output):会创建一个文件夹,默认值是./dist,告诉webpack在什么地方输出创建的bundles
1.output.filename //出口文件名称
2.output.path //路径
- loader:让webpack可以处理那些非js的文件。
1.test:标识要被转换的文件
2.use:装换时,使用哪个loader
- 插件(plugins):通过require(),然后把它添加到plugins数组中
一.webpack基本使用,将两个js文件打包到一个js中
1.去根目录创建一个package.json的文件
yarn init -y //不可以以中文和空格命名
2.安装依赖包
yarn add webpack webpack-cli -D
3.去package.json进行配置
"scripts":{
"build":"webpack" //build这个名字可以自定义
}
4.新建目录src,注意这里一定要是src,webpack默认找下面的src文件夹
5.新建src/add/add.js - 定义求和函数导出
expprt const addFn = (a,b)=>a+b
6.新建src/index.js导入使用
//按需导入
import {addFn} from './add/add'
//{}里面的值要和定义按需导入的值一样
console.log(10,10)
7.运行打包命令
yarn build
二.webpack配置入口出口
默认入口:./src/index.js
默认出口:./dist/main.js //打包js文件,输入yarn build 命令会自动出现dist文件
1.src同级目录新建webpack.config.js
2.填入配置项
const path = require("path")
module.exports = {
entry: "./src/main.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "bundle.js" // 出口文件名
}
}
插件-自动生成html文件
下载插件
yarn add html-webpack-plugin -D
webpack.config.js配置
//引入自动生成HTML的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//...省略其他代码
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // 以此为基准生成打包后html文件
})
]
}
加载器-处理css文件
1.安装依赖包
yarn add style-loader css-loader -D
webpack.config.js配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...其他代码
module: {
rules: [ // loader的规则
{
test: /\.css$/, // 匹配所有的css文件
// use数组里从右向左运行
// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
// 再用 style-loader 将样式, 把css插入到dom中
use: [ "style-loader", "css-loader"]
}
]
}
}
加载器-处理less文件
下载依赖包
yarn add less less-loader -D
webpack.config.js配置
module: {
rules: [ // loader的规则
// ...省略其他
{
test: /\.less$/,
// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
use: [ "style-loader", "css-loader", 'less-loader']
}
]
}
加载器-处理图片文件
直接在webpack.confing.js 的rules就可以
{
test: /\.(png|jpg|gif|jpeg)$/i,
type: 'asset'
}
webpack加载文件优缺点
图片转成base64字符串
优点是浏览器不用发送请求,直接读取
缺点是体积增大30%左右
加载器-处理高版本js语法
安装包
yarn add -D babel-loader @babel/core @babel/preset-env
配置规则
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
}
}
}
]
}