webpack：
webpack 是node的第三方模块包，用于打包代码
webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）
把很多文件打包整合到一起，缩小项目体积，提高加载速度
功能：
less/sass ------> css
ES6/7/8 -------->ES5
html/css/js------>压缩合并
基础使用：
默认的入口文件 ./src/index.js 默认出口文件 ./dist/main.js
- 初始化环境
yarn init
- 安装依赖包
yarn add webpack webpack-cli -D
- package.json配置scripts(自定义命令)
"scripts": {
"build": "webpack"
},
- 项目目录下新建src/add/index.js
export const addFn = (a, b) => a + b
- 项目目录下新建 src/index.js
import { addFn } from './add'
console.log(addFn(4, 5))
- 项目目录下打开命令窗口，运行打包命令
yarn build
or
npm run build
**总结：**打包命令执行后，在项目目录下生成默认的dist目录和打包后默认的main.js文件
-
代码变更，重新打包
-
新建src/tool/index.js
export const getArrSum = (arr) => arr.reducw((sum, val) => { sum += val }, 0) -
更改src/index.js代码
import { addFn } from './add' import { getArrSum } from './tool' console.log(addFn(4, 5)) console.log(getArrSum([1, 2, 3, 4])) console.log(addFn(5, 6)) -
运行打包命令
yarn build**总结：**打包后，代码压缩，变量压缩
-
webpack配置：
如何指定webpack的入口和出口：
- 项目目录下，新建webpack.config.js
- 填写配置项
const path = require('path')
module.exports = {
entry: './src/main.js', // 入口路径
output: {
path: path.resolve(__dirname, 'dist'), // 出口路径为绝对路径+dist文件夹
filename: 'build.js', // 创建的出口文件名称
},
}
打包隔行变色项目：
- 前面的步骤
- 下载jquery，项目目录下新建public/index.html
- src/main.js
import { addFn } from './add'
import { getArrSum } from './tool'
import $ from 'jquery'
console.log(addFn(4, 5))
console.log(getArrSum([1, 2, 3, 4]))
console.log(addFn(5, 6))
$(function () {
$('#app li:nth-child(odd)').css('color', 'red')
$('#app li:nth-child(even)').css('color', 'blue')
})
- 执行打包命令
- 把public以及他的html文件复制到dist目录下
- 在index.html文件中手动引入打包后的build.js
自动生成html文件：
webpack只能打包js文件，插件
HtmlWebpackPlugin简化了 HTML 文件的创建该插件将为你生成一个 HTML5 文件， 在 body 中使用
script标签引入你所有 webpack 生成的 bundle
- 安装：
npm install --save-dev html-webpack-plugin
- webpack.config.js中配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin()],
}
打包后，dist目录下就多了html文件，还自动把打包的build.js文件通过script引入
处理css文件–加载器:
webpack 默认只认识js文件和json文件
-
src/css/index.css给body添加背景颜色
-
把css文件引入到入口文件 被webpack打包
-
loader加载器，让webpack处理其他类型的文件，打包到js中
-
安装
npm install --save-dev style-loader css-loader
- webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin()],
module: {
rules: [
//loader的规则
{
test: /\.css$/i, //匹配所有的css文件
// use数组中从右往左运行
// 先用css-loader让webpack识别css文件的内容打包
// style-loader 把css插入到dom中
use: ['style-loader', 'css-loader'],
},
],
},
}
处理less文件：
- 安装
npm install less less-loader --save-dev
- webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin({
// 以此为标准 生成打包后的html文件
template: './public/index.html',
})],
module: {
rules: [
//loader的规则
{
test: /\.css$/i, //匹配所有的css文件
// use数组中从右往左运行
// 先用css-loader让webpack识别css文件的内容打包
// style-loader 把css插入到dom中
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/i, //匹配所有的less文件
use: [
// 从右往左运行
// compiles Less to CSS
// less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
}
-
src目录下新建less/index.less
-
入口main.js中引入less文件
-
打包
指定生成导入的html文件路径：
webpack配置文件中添加
plugins: [
new HtmlWebpackPlugin({
// 以此为标准 生成打包后的html文件
template: './public/index.html',
}),
],
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
plugins: [
new HtmlWebpackPlugin({
// 以此为标准 生成打包后的html文件
template: './public/index.html',
}),
],
module: {
rules: [
//loader的规则
{
test: /\.css$/i, //匹配所有的css文件
// use数组中从右往左运行
// 先用css-loader让webpack识别css文件的内容打包
// style-loader 把css插入到dom中
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/i, //匹配所有的less文件
use: [
// 从右往左运行
// compiles Less to CSS
// less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
}
从yarn build开始，都走了哪些流程：
执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置
webpack处理图片文件：
webpack无法自己处理图片文件
webpack5使用asset module技术来实现字体文件和图片文件的处理，无需配置额外的loader
https://webpack.docschina.org/guides/asset-modules/
1：webpack5.在rules里，针对图片文件设置type:asset
2:小于8kb转base64字符串进js里，大于8kb输出文件
- 在src/assets准备图片文件
- 在less/aa.less文件中对body设置背景图片
- 在入口导入图片文件，设置到img标签插入到body
- 打包
module:{
rules:[
{
// 图片文件的配置 (仅适用于webpack5版本)
test: /\.(gif|png|jpg|jpeg)/,
type: 'asset', //匹配上面的文件后，webpack会把他们当静态资源处理打包
// 如果你设置的asset模式 以8kb来区分图片文件
// 小于8kb的 把图片文件转base64，打包到js中
// 大于8kb的，直接把图片文件输出到dist下
},
]
}
为什么8kb上下的图片要区分：
图片翻译成base64打包到js文件中
好处：浏览器不用法请求了，直接可以读取，速度快
坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失
webpack处理字体图标：
- src/assets中放入fonts字体相关的文件夹
- src/main.js引入assets/font/iconfont.css
- src/main.js创建一个i标签，把字体图标标签添加到body上
- 添加针对字体文件的加载器规则，使用asset/resource （直接输出文件并配置路径）
- 打包
module:{
rules:[
{
test: /\.(ttf|eot|svg|woff|woff2)/,
type: 'asset/resource',
generator: {
// 生成文件的文字 定义规则
filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
},
},
]
}
#### webpack对js语法降级
babel https://www.babeljs.cn/
babel-loader https://v4.webpack.js.org/loaders/babel-loader/
babel一个JavaScript编译器，把高版本js语法降级处理输出兼容的低版本语法
babel-loader 让webpack编译打包js代码
步骤：
- src/main.js 定义箭头函数，打印箭头函数变量（不要调用，为 了让webpack打包函数，看降级效果）
- 下载加载器
npm install -D babel-loader @babel/core @babel/preset-env webpack
- webpack配置
- 打包
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
use: {
loader: 'babel-loader', //使用这个loader处理js文件
options: {
//加载器选项
presets: ['@babel/preset-env'], // @babel/preset-env 降级规则 按照这里的规则降级我们的js语法
},
},
},
webpack开发服务器：
#### webpack开发服务器
问题：每次修改完代码，重新yarn build打包，才能看到最新效果，实际工作中，打包yarn build非常耗时
为什么：
- 从0构建依赖
- 磁盘读取对应的文件到内存，webpack开始加载
- 再用对应的loader进行处理
- 将处理完的内容，输出到磁盘指定目录
解决：
**起一个开发服务器，缓存一些已经打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用**
打包在内存中，速度快
自动更新打包变化的代码，实时返回给浏览器显示
###### 使用
webpack-dev-server
https://webpack.docschina.org/api/webpack-dev-server/#root
- 下载
npm install --save-dev webpack-dev-server
- 自定义webpack开发服务器启动命令serve 在package.json里
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
设置开发环境：
mode: 'development', //设置开发环境还是生产环境
启动服务器：
yarn serve
**webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面**
###### 修改端口号
webpack.config.js中修改端口号，重新启动项目
module.exports = {
mode: 'development',
devServer: {
port: 3000,
},
}
webpack-dev-server
- 自定义webpack开发服务器启动命令serve 在package.json里
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
设置开发环境：
mode: 'development', //设置开发环境还是生产环境
启动服务器：
yarn serve
**webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面**
###### 修改端口号
webpack.config.js中修改端口号，重新启动项目
module.exports = {
mode: 'development',
devServer: {
port: 3000,
},
}
扫一扫
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
