大佬教程收集整理的这篇文章主要介绍了手把手教你打包代码----webpack,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
webpack本质是, node的一个第三方模块包, 用于打包代码;
现代 javascript 应用程序的 静态模块打包器 (module bundler)
功能: 1.压缩,合并,打包 2. 语法转换
3. 监听代码变化,自动打包和更新 4. 提取vue中的html/.css/js文件
作用:
1.减少文件数量;
2.缩减代码体积;
3.提高浏览器打开的速度;
1.初始化--package.json
yarn init
2.下载webpack等模块包
yarn add webpack webpack-cli -D
3.在package.json自定义命令,为打包做准备
scripts: {
"build": "webpack"
}
4.新建目录src,在src文件夹下建立index.js文件---该文件为,默认入口 ./src/index.js
5.新建业务文件,并定义执行函数(js代码)---src/add/add.js 6.在src/index.js中导入业务文件 7.运行打包代码
yarn build
#或者 npm run build
打包后会自动生成dist文件夹 ----默认出口: ./dist/main.js 8.打开默认生成的dist和main.js文件,查看其中代码
以后代码变更, 如何重新打包呢?
别担心,只需要输入打包指令重新打包就好啦~
yarn build
默认入口: ./src/index.js
entry: "./src/main.js",
默认出口: ./dist/main.js
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "bundle.js" // 出口文件名
}
修改package.json, 自定义打包命令 - 让webpack使用配置文件
"scripts": {
"build": "webpack"
},
webpack默认只能处理js类型文件,无法识别html文件---因此,我们需要借助工具来解决引入HTML
目标: html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js
1.下载插件
yarn add html-webpack-plugin -D
2.webpack.config.js配置
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...省略其他代码
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // 以此为基准生成打包后html文件
})
]
}
css加载器
安装
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"]
}
]
}
}
把css文件引入到 main.js
import "./css/index.css"
目标: less-loader让webpack处理less文件, less模块翻译less代码
下载包
yarn add less less-loader -D
webpack.config.js配置
rules: [ // loader的规则
// ...省略其他
{
test: /.less$/,
// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
use: [ "style-loader", "css-loader", 'less-loader']
}
]
把less引入到main.js中
import "./less/index.less"
目标: 用asset module方式(webpack5版本新增)
下载包
yarn add url-loader file-loader -D
webpack.config.js 配置
{
test: /.(png|jpg|gif|jpeg)$/i,
type: 'asset'
}
在src/main.js - 把图片插入到创建的img标签上
// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)
总结: url-loader 把文件转base64 打包进js中, 会有30%的增大, file-loader 把文件直接复制输出
字体文件加载器
配置
{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
test: /.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: { //生成文件名定义规则(自定义文件名)
filename: 'font/[name].[hash:6][ext]'
}
}
在main.js引入iconfont.css
// 引入字体图标文件
import './assets/fonts/iconfont.css'
总结: url-loader和file-loader 可以打包静态资源文件
安装包
yarn add -D babel-loader @babel/core @babel/preset-env
配置规则
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
}
}
}
]
总结: babel-loader 可以让webpack 对高版本js语法做降级处理后打包
每次修改代码, 都需要重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时,我们可以启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问。
下载包
yarn add webpack-dev-server -D
配置自定义命令
scripts: {
"build": "webpack",
"serve": "webpack serve"
}
如果想设置特定的端口号,可以在webpack.config.js中添加服务器配置(webpack-dev-server配置 )
module.exports = {
// ...其他配置
devServer: {
port: 3000 // 端口号
}
}
运行命令-启动webpack开发服务器
yarn serve
#或者 npm run serve
以上是大佬教程为你收集整理的手把手教你打包代码----webpack全部内容,希望文章能够帮你解决手把手教你打包代码----webpack所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。