webpack 简化的介绍
齐思淼
对于 webpack 自我Z总结进行的简化操作
webpack -v
-g 代表全局安装
-d 代表局部安装
--save 和--save-dev下载标签
他们表面上的区别是
–save 会把依赖包名称添加到 package.json 文件 dependencies 键下，
–save-dev 则添加到 package.json 文件 devDependencies 键下.
dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的
比如 我们安装 js的压缩包gulp-uglify 时，我们采用的是 “npm install –save-dev gulp-uglify ”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
安装 webpack 和 webpack-cli
npm install webpack webpack-cli -g
创建 package.json 的 管理包依赖的方式
第一种 npm init ....... 配置项目名称 ....
第二种 npm init -y 默认安装
创建 webpack.config.js 定义配置文件
在其中 entry 中配置入口文件 output{path:打包发布文件夹路径，filename:创建发布的文件名称} 定义出口文件
打包 css 安装相关 的 loader
注意 在配置 css 相关loader 时 style-loader 一定要放在 css-loader 前面
安装 css 依赖 loader: 对模块源代码进行解析（转换）
npm install css-loader -g
在 webpak.config.js 中 module 配置 css-loader 相关依赖
module:{
rules:[
{
test:/\.css$/,
use:[
"css-loader"
]
}
]
}
// 安装 style-loader
npm install style-loader -g
module:{
rules:[
{
test:/\.css$/,
use:[
"style-loader",
"css-loader"
]
}
]
}
安装 less 依赖
npm install less -d
npm install less-loader -d
配置 less
module:{
rules:[
{
test:/\.css$/,
use:[
"style-loader",
"css-loader"
]
},
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
postcss 转换和配置
npm install postcss postcss-cli -D
npm install autoprefixer -D // 编写代码时需要加浏览器前缀的 代码
npx postcss --use autoprefixer -o demo.css ./src/css/style.css
npm install postcss-loader -D
创建 postcss.config.js 文件
module.exports = {
plugins:[
require(autoprefixer)
]
}
修改 webpack.config.js 文件
module:{
rules:[
{
test:/\.css$/,
use:[
"style-loader",
"css-loader",
"postcss-loader"
]
}
]
}
postcss-preset-env 插件 可以不用安装 autoprefixer 插件
作用：转成 大多数 浏览器 认识 css 根据目标浏览器或运行环境添加所需的 polyfill
npm install postcss-preset-env -D
修改刚刚创建的 postcss.config.js 文件
module.exports = {
pulfins:[
require('postcss-preset-env')
]
}
更新 webpack.config.js 文件
module:{
rules:[
{
test:/\.css$/,
use:[
"style-loader",
"css-loader",
"postcss-loader"
]
},
{
test:/\.(less|css)$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
// 打包 img 图片
npm install
第一种 创建 背景图片的打包方式
js 创建 DOM 并 添加背景 追加到 body 中
创建 相关的 js DOM 文件 和 css 文件 进行关联
file-loader webpack4 时用的 webpack5 已经将 file-loader 废弃了
负责处理 jpg、png 等格式图片
还负责处理 import/require() 方式 引入的一个文件资源，并将它放入输出的文件夹中
npm install file-loader -D
修改 webpack.config.js 文件
module:{
rules:[
{
css.....
},
{
less....
},
{
test:/\.(jpe?g|png|gif|svg)$/,
use:"file-loader"
}
]
}
第二种 以 img 的 src 的方式 创建 DOM 并打包
在 创建 DOM 的 .js 文件中书写
import zznhImg from "../img/zznh.png";
const imgEl = document.create.createElement('img');
imgEl.src = zznhImg
document.body.appendChild(imgEL);
对于图片的打包 修改 webpack.config.js 文件
module:{
rules:[
{
css.....
},
{
less....
},
{
test:/\.(jpe?g|png|gif|svg)$/,
use:[
loader:"file-loader",
options:{
// outputPath:"img", 下面的简写 img 文件
name:"img/[name]_[hash:6].[ext]"
}
]
}
]
}
url-loader 可以 替代 file-loader
工作方式一致 但是可以将较小的文件 转成 base64 的 URL
npm install url-loader -D
修改 webpack.config.js 文件
module:{
rules:[
{
css.....
},
{
less....
},
{
test:/\.(jpe?g|png|gif|svg)$/,
use:[
loader:"url-loader",
options:{
name:"img/[name]_[hash:6].[ext]",
// 小于 100KB 的图片文件进行 编码 大的进行打包
limit:100 * 1024
}
]
}
]
}
asset module type 不需要安装 webpack 内置的
在 webpack 5 之前，加载这些资源我们需要安装一些 loader 比如 raw-loader、url-loader、file-loader
在 webpacK 5 开始 ，我们可以直接使用 资源模块类型 （asset module type） 来 替代上面的这些 loader
修改 webpack.config.js 文件
module:{
rules:[
{
css.....
},
{
less....
},
{
test:/\.(jpe?g|png|gif|svg)$/,
type:"asset",
generator:{
filename:"img/[name]_[hash:6][ext]"
},
parser:{
dataUrlCondition:{
maxSize: 100 * 1024
}
}
}
]
}
关于 字体文件的打包方式
下载 阿里图标库 中的相关字体文件
在创建 DOM 元素的 js 文件中配置
import '../font/iconfont.css'
const iEl = document.createElement('i');
iEl.className = "iconfont icon-ashbin";
document.body.appentChild(iEL);
// 第一种 打包 字体文件的方式 使用 file-loader
修改 webapck.config.js 文件
module:{
rules:[
{
css.....
},
{
less....
},
{
jpg.....
},
{
test:/\.(eot|ttf|woff2?)$/,
use:[
loader:"file-loader",
options:{
// outputPath:"font",
name:"font/[name]_[hash:6].[ext]
}
]
}
]
}
// 第二种打包字体文件的 方式 asset
修改 webpack.config.js
module:{
rules:[
{
css.....
},
{
less....
},
{
jpg.....
},
{
test:/\.(eot|ttf|woff2?)$/,
type:"asset/resource",
generator:{
filename:"font/[name]_[hash:6][ext]"
}
}
]
}
webpack 中 相关插件的使用
npm init
Plugin 插件
webpack 的另一个 核心是 Plugin
Loader 用于特定的模块类型的转化
Plugin 用于执行更加广泛的任务，比如 打包优化、资源管理、环境变量 注入 等
一、 第一个 自动打包 打包删除之前的 dist 文件 创建新的 dist 文件
CleanWebpackPlugin
npm install clean-webpack-plugin -D
修改 webpack.config.js 文件
// 先引入此插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// 入口
entry: './src/main.js',
// 出口
output：{
},
// 相关 loader 配置
module:{
},
// 插件的配置
plugins:[
new CleanWebpackPlugin()
]
}
二、 第二个 打包 html
HtmlWebpackPlugin 插件
我们的 HTML 文件 试编写在 根目录下的，而最终打包 的 dist 文件中是没有 index.html 文件的
在 进行项目的部署时 必然也是需要对应的 入口文件 index.html
所以需要对 index.html 进行打包处理
npm install html-webpack-plugin -D
小提示：首先 如果 目录下有 index.html 文件可以先进行删除
修改 webpack.config.js 文件
const path = require("path");
// 引入此插件
import HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/main.js,
// 出口
output:{
path:path.resolve(_dirname:'./build');
filename:"js/build.js"
},
// 相关 loader
module:{
},
// 相关的插件
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
]
}
三、 第三个 DefinePlugin (此插件 时 webpack 的内置插件不需要安装)
但是 这个时候编译还会出错，因为 在模块中还使用到一个 BASE_URL 的常量
解决 index.html 中的 BASE_URL 值打包报错的问题
// 引入此插件
const { DefinePlugin } = require('webpack');
module.exports = {
// 入口
entry:"./src/main.js',
// 出口
output:{
path:path.resolve(__dirname:'./build');
filename:"js/bundle.js"
},
module:{},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html",
title:"标题“
}),
new DefinePlugin({
BSAE_URL:"./"
})
]
}
四、 CopyWebpackPlugin 文件拷贝
负责拷贝 public 文件中的 favicon.ico 文件到 build(dist) 文件中
npm install copy-webpack-plugin -D
// 修改 webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// 入口
entry:"./src/main.js',
// 出口
output:{
path:path.resolve(__dirname:'./build');
filename:"js/bundle.js"
},
module:{},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html",
title:"标题“
}),
new DefinePlugin({
BSAE_URL:"./"
}),
new CopyWebpackPlugin({
patterns:[
{
from:"public",
to:"./",
// 忽略复制的文件
globOptions:{
ignore:[
"**/index.html"
]
}
}
]
})
]
}
Mode 配置
修改 webpack.config.js 文件
const path = require("path");
const { CloneWebpackPlugin } = require('clone-webapck-plugin');
const HtmlWebpackLogin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// 设置 模式
// development 开发阶段 设置 development
// production 准备打包上线的时候 设置 production
mode:"development",
// 设置 source-map 建立 js 映射文件，方便调试代码和错误
devtool:"source-map",
// 入口
entry:"./src/main.js",
// 出口
output:{
path:path.resolve(__dirname:'./build');
filename:"js/bundle.js"
}，
module:{},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html",
title:"标题"
}),
new DefinePlugin({
BASE_URL:"./"
}),
new CopyWebpackPlugin({
patterns:[
{
from:"public",
to:"./",
// 忽略复制的文件
globOptions:{
ignore:[
"**/index.html"
]
}
}
]
})
]
}
Babel
Babel 是前端开发不可缺少的一部分
简单来说，就是 将 ES6 及以上 代码编译转换为 浏览器能识别的 ES5 的语法
npm install @babel/cli -D
npx babel demo.js --out-file text.js // file 代表打包的文件名 test.js 代表输出的文件
// 转换箭头函数的插件
npm install @babel/plugin-transform-arrow-functions -D
npx babel demo.js --out-file text.js --plugins=@babel/plugin-transform-arrow-functions
// 转换 ES6 的 const 等 块级作用域的 插件
npm install @babel/plugin-transform-block-scoping -D
npx babel demo.js --out-file text.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
Babel 的预设 preset
但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设 （preset）;
安装 @babel/preset-env 预设
npm install @babel/preset-env -D
npx babel demo.js --out-file text.js --presets=@babel/preset-env
babel-loader
默认 webpack 在打包的时候不会把 src 下面的根目录中的 main.js(可能是其他文件名) 中的 ES6 语法进行编译的所以需要安装 babel-loader
npm install babel-loader -D
在 webpack.config.js 的 同级 创建 babel.config.js 文件
// 书写配置
module.exports ={
presets:[
"@babel/preset-env"
]
}
// 修改 webpack.config.js 文件
module:{
rules:[
{
css...
},
{
test:/\.(jpe?g|png|gif|svg)$/,
type:"asset",
generator:{
filename:"img/[name]_[hash:6][ext]
},
parser:{
dataUrlCondition:{
maxSize:100 * 1024
}
}
},
{
test:/\.(eot|ttf|woff2?)$/,
use:[
loader:"file-loader",
options:{
name:"font/[name]_[hash:6].[ext]"
}
]
},
{
test:/\.js$/,
loader:"babel-loader"
}
]
}
打包 vue 代码
npm install
// 安装 vue
npm install vue@next
// 配置 js 文件
在 src 的跟目录下的 main.js 文件 中 书写 vue 代码
// 配置代码
import { sum } from './js/math";
// 指定 引入的 vue 版本
import { createApp } from "vue/dist/vue.esm-bundler";
const { priceFormat } = require("./js/format");
import "./js/element”；
console.log(sum(20,30));
console.log(priceFormat());
// 创建 vue
const App ={
template:`<h1>创建的 vue 代码</h1>`，
data(){
return{
title:"hello world!"
}
}
}
Vue.createApp(App).mount("#app");
npm run build // 打包后应该不会出问题
VSCode 对 SFC 文件的支持
在前面我们提到过，真实开发中多数请款下都是使用 SFC(single-file components (单文件组件)).
VSCode 对 SFC 的支持
插件一：Vetur, 从 Vue2 开发就一直在使用的 VSCode 支持的 Vue 插件
插件二：Volar, 官方推荐的插件
在 src 文件中创建 vue/App.vue
// 编写代码
<template>
<h2>我是 vue 渲染出来的</h2>
<title>{{ title }}</title>
</template>
<script>
export default {
data(){
return {
title:"Hello world",
message:"标题"
}
},
methods:{
}
}
</script>
<style>
h2{
color:red;
}
</style
// 在 src 的根 main.js(index.js) 文件中编写
// 配置代码
import { sum } from "./js/math";
// 指定引入的 vue 版本
import { createApp } from 'vue/dist/vue.esm-bundler';
const { priceFormat } = require("./js/format");
import './js/elemnt';
cosole.log(sum(20,30));
console.log(priceFormat())
const app = createApp(App);
app.mount("#app")
// 安装 vue-loader
npm install vue-loader@next -D
npm install @vue/compiler-sfc -D
// 修改 webpack.config.js 文件
const { VueLoaderPlugin } = require('vue-loader/dist/index');
module:{
rules:[
{
css...
},
{
test:/\.(jpe?g|png|gif|svg)$/,
type:"asset",
generator:{
filename:"img/[name]_[hash:6][ext]
},
parser:{
dataUrlCondition:{
maxSize:100 * 1024
}
}
},
{
test:/\.(eot|ttf|woff2?)$/,
use:[
loader:"file-loader",
options:{
name:"font/[name]_[hash:6].[ext]"
}
]
},
{
test:/\.js$/,
loader:"babel-loader"
},
{
test:/\.vue$/,
loader:"vue-loader"
},
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html",
title:"标题"
}),
new DefinePlugin({
BASE_URL:"./"
}),
new CopyWebpackPlugin({
patterns:[
{
from:"public",
to:"./",
// 忽略复制的文件
globOptions:{
ignore:[
"**/index.html"
]
}
}
]
}),
new VueLoaderPlugin()
]
}
npm run build
// 由此运行成功 可以创建 .vue 文件 将其 定义为 局部组件 并在 主组件中进行引入 注册
npm run build // 成功，可以编写多个组件
// 注意 要求定义每个组件时都要暴露
export default{
data(){
return {
msg:" vue 文本"
}
}
}
vue_options_api 对 vue2 做适配
// 修改消除的一些警告
// 修改 webpack.config.js 文件
module:{
rules:[
{
css...
},
{
test:/\.(jpe?g|png|gif|svg)$/,
type:"asset",
generator:{
filename:"img/[name]_[hash:6][ext]
},
parser:{
dataUrlCondition:{
maxSize:100 * 1024
}
}
},
{
test:/\.(eot|ttf|woff2?)$/,
use:[
loader:"file-loader",
options:{
name:"font/[name]_[hash:6].[ext]"
}
]
},
{
test:/\.js$/,
loader:"babel-loader"
},
{
test:/\.vue$/,
loader:"vue-loader"
},
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html",
title:"标题"
}),
new DefinePlugin({
BASE_URL:"./"，
// 用于消除部分警告使用
__VUE_OPTIONS_API__:true,
__VUE_PROP_DEVTOOLS__:false
}),
new CopyWebpackPlugin({
patterns:[
{
from:"public",
to:"./",
// 忽略复制的文件
globOptions:{
ignore:[
"**/index.html"
]
}
}
]
}),
new VueLoaderPlugin()
]
}
npm run build
// 修改 src 下的 根文件 main.js(index.js)
将 import { createApp } from 'vue/dist/vue:esm-bundler';
改为 import { createApp } from 'vue';
nom run build
类似资料：