做一个卖东西的网站,wordpress 大流量,哪个网站可以做加工代理的,关键词优化报价打包工具
使用框架#xff08;React、Vue#xff09;#xff0c;ES6 模块化语法#xff0c;Less/Sass 等 CSS预处理器等语法进行开发的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS 等语法#xff0c;才能运行。 所以需要打包工具帮我们做完这些事。除此之…打包工具
使用框架React、VueES6 模块化语法Less/Sass 等 CSS预处理器等语法进行开发的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS 等语法才能运行。 所以需要打包工具帮我们做完这些事。除此之外打包工具还能压缩代码、做兼容性处理、提升代码性能等。
有哪些打包工具 Grunt、Gulp、Parcel、Webpack、Rollup、Vite
webpack是什么
webpack是一种前端静态资源打包工具。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。以一个或多个文件作为打包的入口将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件就可以在浏览器段运行了。它将根据模块的依赖关系进行静态分析打包生成对应的静态资源(bundle)。 Webpack 本身功能是有限的: 开发模式仅能编译 JS 中的 ES Module 语法 生产模式能编译 JS 中的 ES Module 语法还能压缩 JS 代码
webpack五个核心概念
1.Entry 入口(Entry)指示webpack以哪个文件为入口起点开始打包分析构建内部依赖图。 2.Output 输出(Output)指示webpack打包后的资源bundles输出到哪里去以及如何命名。 3.Loader Loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)。 4.Plugins 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩一直到重新定义环境中的变量等。 5.Mode 模式(Mode)指示webpack使用相应模式的配置。
webpack基本使用
npm init -y 初始化一个包描述文件运行后会生成package.json 启用 Webpack(开发模式)npx webpack ./src/main.js --modedevelopment后续写了配置文件每次就直接npx webpack 成功标志 默认 Webpack 会将文件打包输出到 dist 目录下。
webpack基本配置
在项目根目录下新建配置文件webpack.config.js
// Node.js的核心模块专门用来处理文件路径
const path require(path);module.exports {// 入口// 相对路径和绝对路径都行entry: ./src/main.js,// 输出output: {// path: 文件输出目录必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, dist),// 入口文件输出路径filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中// clean: true, // 自动将上次打包目录资源清空},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: development, // 开发模式
};Webpack 是基于 Node.js 运行的所以采用 Common.js 模块化规范
处理样式资源
Webpack 本身是不能识别样式资源(Css、Less、Sass、Scss、Styl)的所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。
处理 CSS 资源
需要下载两个 loadernpm i css-loader style-loader -D css-loader负责将 CSS文件编译成 Webpack 能识别的模块 style-loader会动态创建一个 Style 标签里面放置 Webpack 中 CSS 模块内容。 用法在webpack.config.js里的rules加入
rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},
],src/css/index.css
.box1 {width: 100px;height: 100px;background-color: red;
}src/main.js
import count from ./js/count;
// 引入 Css 资源Webpack才会对其打包
import ./css/index.css;console.log(count(2, 1));public/index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlewebpack5/title/headbodyh1Hello Webpack5/h1!-- 准备一个使用样式的 DOM 容器 --div classbox1/div!-- 引入打包后的js文件才能看到效果 --script src../dist/static/js/main.js/script/body
/html运行指令npx webpack打开 index.html 页面查看效果。
其他(Less、Sass、Scss、Styl)一个道理按照官网配置即可。
处理图片资源
用法在webpack.config.js里的rules加入
{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {//对图片资源进行优化dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片会被base64处理}},generator: {//修改输出资源的名称和路径// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},
},对图片资源进行优化将小于某个大小的图片转化成 data URI 形式Base64 格式优点减少请求数量缺点体积变得更大图片以 data URI 形式内置到 js 中了不会输出到dist。 注意需要将上次打包生成的文件清空再重新打包才有效果
Webpack 会将所有打包好的图片资源输出到 dist 目录下样式资源经过 style-loader 的处理打包到 main.js 里面去了所以没有额外输出出来。
type: “asset/resource” 相当于file-loader, 将文件转化成 Webpack 能识别的资源其他不做处理 type: “asset” 相当于url-loader, 将文件转化成 Webpack 能识别的资源同时小于某个大小的资源会处理成 data URI 形式。
处理js资源
Webpack 对 js 处理是有限的只能编译 js 中 ES 模块化语法不能编译其他语法导致 js 不能在 IE 等浏览器运行所以要做一些兼容性处理。其次开发中团队对代码格式是有严格要求的需要使用专业的工具来检测。针对 js 兼容性处理使用 Babel 来完成针对代码格式使用 Eslint 来完成。
Eslint
用来检测 js 和 jsx 语法的工具在Eslint 配置文件里面写上各种 rules 规则将来运行 Eslint 时就会以写的规则对代码进行检查。 1.下载包npm i eslint-webpack-plugin eslint -D
2.定义 Eslint 配置文件.eslintrc.js
module.exports {// 继承 Eslint 规则extends: [eslint:recommended],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {// 解析选项ecmaVersion: 6, // ES 语法版本sourceType: module, // ES 模块化ecmaFeatures: { // ES 其他特性jsx: true // 如果是 React 项目就需要开启 jsx 语法}},rules: {no-var: 2, // 不能使用 var 定义变量},
};rules 具体规则 “off” 或 0 - 关闭规则 “warn” 或 1 - 开启规则使用警告级别的错误warn (不会导致程序退出) “error” 或 2 - 开启规则使用错误级别的错误error (当被触发的时候程序会退出)
extends 继承开发中一点点写 rules 规则太费劲了所以有更好的办法继承现有的规则 Eslint 官方的规则eslint:recommended Vue Cli 官方的规则plugin:vue/essential React Cli 官方的规则react-app
3.修改main.js
4.配置webpack.config.js
const ESLintWebpackPlugin require(eslint-webpack-plugin);
……
plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),
],5.运行指令npx webpack
VSCode有 Eslint 插件即可不用编译就能看到错误此时就会对项目所有文件默认进行 Eslint 检查了 dist 目录下的打包后文件就会报错。 所以只需要检查 src 下面的文件不需要检查 dist 下面的文件使用 Eslint 忽略文件解决。在项目根目录新建下面文件.eslintignore
# 忽略dist目录下所有文件
distBabel
JavaScript 编译器主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法以便能够运行在当前和旧版本的浏览器或其他环境中。 1.下载包npm i babel-loader babel/core babel/preset-env -D
2.定义 Babel 配置文件babel.config.js
module.exports {presets: [babel/preset-env],
};presets 预设就是一组 Babel 插件, 扩展 Babel 功能。 babel/preset-env: 一个智能预设允许使用最新的 JavaScript。 babel/preset-react一个用来编译 React jsx 语法的预设。 babel/preset-typescript一个用来编译 TypeScript 语法的预设。
3.修改main.js
4.配置webpack.config.js 在rules里增加
{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,
},5.运行指令npx webpack
处理 Html 资源
1.下载包npm i html-webpack-plugin -D 2. 配置webpack.config.js
const HtmlWebpackPlugin require(html-webpack-plugin);
……
plugins: [new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, public/index.html),}),
],3.修改 index.html去掉引入的 js 文件因为 HtmlWebpackPlugin 会自动引入。 4.运行指令npx webpack
自动化
每次写完代码都需要手动输入指令才能编译代码太麻烦了下面使用开发服务器来自动化。 1.下载包npm i webpack-dev-server -D 2.配置webpack.config.js
module.exports {// 添加开发服务器devServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器},
};3.运行指令npx webpack serve 注意当使用开发服务器时所有代码都会在内存中编译打包并不会输出到 dist 目录下。开发时其实只关心代码能运行有效果即可至于代码被编译成什么样子并不需要知道。
生产模式
生产模式是开发完成代码后我们需要得到代码将来部署上线。这个模式下主要优化代码运行性能和代码打包速度。原本的webpack.config.js变成两个了。 文件目录
├── webpack-test (项目根目录)├── config (Webpack配置文件目录)│ ├── webpack.dev.js(开发模式配置文件)│ └── webpack.prod.js(生产模式配置文件)├── node_modules (下载包存放目录)├── src (项目源码目录除了html其他都在src里面)│ └── 略├── public (项目html文件)│ └── index.html├── .eslintrc.js(Eslint配置文件)├── babel.config.js(Babel配置文件)└── package.json (包的依赖管理配置文件)文件目录变了所以所有相对路径需要回退一层目录才能找到对应的文件需要修改修改 webpack.dev.js
path: undefined, // 开发模式没有输出不需要指定输出目录
// clean: true, // 开发模式没有输出不需要清空输出结果
context: path.resolve(__dirname, ../src),
template: path.resolve(__dirname, ../public/index.html),运行开发模式的指令npx webpack serve --config ./config/webpack.dev.js
修改 webpack.prod.js
path: path.resolve(__dirname, ../dist), // 生产模式需要输出
mode: production,运行生产模式的指令npx webpack --config ./config/webpack.prod.js
配置快捷运行指令
为了方便运行不同模式的指令将指令定义在 package.json 中 scripts 里面
// package.json
{// 其他省略scripts: {start: npm run dev,dev: npx webpack serve --config ./config/webpack.dev.js,build: npx webpack --config ./config/webpack.prod.js}
}以后启动指令(start不用加run其他需要加) 开发模式npm start 或 npm run dev 生产模式npm run build
单独处理CSS
CSS文件目前被打包到 js 文件中当 js 文件加载时会创建一个 style 标签来生成样式这样对于网站来说会出现闪屏现象用户体验不好应该是单独的 CSS文件通过 link 标签加载性能才好。 1.下载包npm i mini-css-extract-plugin -D 2.配置webpack.prod.js
const MiniCssExtractPlugin require(mini-css-extract-plugin);
rules: [{test: /\.css$/,// 将先前的style-loader替换成MiniCssExtractPlugin.loaderuse: [MiniCssExtractPlugin.loader, css-loader],},
],
plugins: [// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),
],3.运行指令npm run build
CSS兼容性处理
1.下载包npm i postcss-loader postcss postcss-preset-env -D 2.配置webpack.prod.js
rules:[{test: /\.less$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},less-loader,],},
]当配置多了的情况下上面的兼容性处理会略显冗余所以可以抽象成个函数合并配置
// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);
};
……rules:[{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders(less-loader),},{test: /\.s[ac]ss$/,use: getStyleLoaders(sass-loader),},
]3.控制兼容性可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。
{// 其他省略browserslist: [last 2 version, 1%, not dead]
}3.运行指令npm run build
CSS压缩
1.下载包npm i css-minimizer-webpack-plugin -D 2.配置webpack.prod.js
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);
plugins: [// css压缩new CssMinimizerPlugin(),
],3.运行指令npm run build
默认生产模式已经开启了html 压缩和 js 压缩不需要额外进行配置。
参考文档
