苏州专业高端网站建设网络公司,水果网站建设方案,电子元器件网站怎么做,wordpress 字体不一样webpack基础 webpack基础目录webpack基础前言Webpack 是什么#xff1f;Webpack 有什么用#xff1f;一、webpack的基本使用webpack如何使用文件和文件夹创建创建文件下载依赖二、基本配置5 大核心概念准备 Webpack 配置文件修改配置文件处理样式资源处理图片资源修改输出资源…webpack基础 webpack基础目录webpack基础前言Webpack 是什么Webpack 有什么用一、webpack的基本使用webpack如何使用文件和文件夹创建创建文件下载依赖二、基本配置5 大核心概念准备 Webpack 配置文件修改配置文件处理样式资源处理图片资源修改输出资源的名称和路径处理 js 资源webpack打包配置Eslintwebpack打包配置Babel处理 Html 资源开发服务器自动化配置开发模式介绍生产模式介绍Css处理提取 Css 成单独文件Css 兼容性处理Css 压缩前言
Webpack 是什么
Webpack 是一个静态资源打包工具目前市面上最流量的是 Webpack其他的打包工具还有Grunt、Glup、Parcel、Rollup、Vite…等。
Webpack 有什么用
总的来说将工程代码打包成浏览器能够运行的代码。 往细了说开发时我们会使用框架React、VueES6 模块化语法Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法只有JS、Css的代码才能在浏览器上运行。
所以我们需要webpack打包工具帮我们做完这些事。
除此之外webpack打包工具还能压缩代码、做兼容性处理、提升代码性能等。 一、webpack的基本使用
Webpack 是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件就可以在浏览器段运行了。 我们将 Webpack 输出的文件叫做 bundle。
Webpack 本身功能是有限的: 开发模式仅能编译 JS 中的 ES Module 语法。 生产模式能编译 JS 中的 ES Module 语法还能压缩 JS 代码。
webpack如何使用
文件和文件夹创建
webpack_code # 项目根目录所有指令必须在这个目录运行└── src # 项目源码目录├── js # js文件目录│ ├── count.js│ └── sum.js└── main.js # 项目主文件创建文件
count.js
export default function count(x, y) {return x - y;
}sum.js
export default function sum(...args) {return args.reduce((p, c) p c, 0);
}main.js
import count from ./js/count;
import sum from ./js/sum;console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));下载依赖
初始化 package.json
yarn init -y // 会自动跳过会话
yarn init // 不跳过会话需要进行项目信息的初始化此时会在跟目录下生成一个基础的 package.json 文件。 下载依赖
yarn add webpack webpack-cli -D启动webpack 打包工具 说明 npx webpack: 是用来运行本地安装 Webpack 包的。 ./src/main.js: 指定 Webpack 从 main.js 文件开始打包不但会打包 main.js还会将其依赖也一起打包进来。 –modexxx指定模式环境
npx webpak ./src/main.js --modedevelopment // 开发模式
npx webpack ./src/main.js --modeproduction // 生产模式默认 Webpack 会将文件打包输出到 dist 目录下我们查看 dist 目录下文件情况就好了Webpack 本身功能比较少只能处理 js 资源一旦遇到 css 等其他资源就会报错。所以我们学习 Webpack就是主要学习如何处理其他资源。
二、基本配置
5 大核心概念
entry入口 指示 Webpack 从哪个文件开始打包
output输出 指示 Webpack 打包完的文件输出到哪里去如何命名等
loader加载器 webpack 本身只能处理 js、json 等资源其他资源需要借助 loaderWebpack 才能解析
plugins插件 扩展 Webpack 的功能
mode模式 主要由两种模式
开发模式development 生产模式production
准备 Webpack 配置文件
在项目根目录下新建文件webpack.config.js
module.exports {// 入口entry: ,// 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: ,
};修改配置文件
const path require(path); // Node.js的核心模块专门用来处理文件路径module.exports {// 入口// 相对路径和绝对路径都行entry: ./src/main.js,// 输出output: {// path: 文件输出目录必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, dist),// filename: 输出文件名filename: main.js,},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: development, // 开发模式
}修改了webpack.config.js 后我们启动webpack的命令就得到了简化
npx webpack ./src/main.js --modedevelopment // 原来的
npx webpack // 现在的Webpack 将来都通过 webpack.config.js 文件进行配置来增强 Webpack 的功能
处理样式资源
项目上常用的样式有CSS、less、Sass、Styl等写法Webpack 本身是不能识别样式资源的所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 下载样式处理的包
yarn add css-loader style-loader -D // 用于处理css 资源
yarn add less-loader less -D // 用于处理less 资源
yarn add sass-loader sass -D // 用于处理sass scss 资源
yarn add stylus-loader stylus -D // 用于处理 styl 资源对应的webpack.config.js
const path require(path);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: main.js,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},],},plugins: [],mode: development,
};
运行webpack的打包命令
npx webpack把编写的src下面的样式文件打包到了 disr/mian.js 文件中 为什么样式资源没有打包到src 文件下呢 因为经过 style-loader 的处理样式资源打包到 main.js 里面去了所以没有额外输出出来
处理图片资源
过去在 Webpack4 时我们处理图片资源通过 file-loader 和 url-loader 进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了我们只需要简单配置即可处理图片资源
const path require(path);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: main.js,},module: {rules: [// 处理图片资源的webpack 的配置{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {// 对图片资源进行优化,小于10kb的图片会被base64处理// 优点减少请求数量// 缺点体积变得更大maxSize: 10 * 1024 // 小于10kb的图片会被base64处理}}},],},plugins: [],mode: development,
};修改输出资源的名称和路径
const path require(path);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},],},plugins: [],mode: development,
};
处理 js 资源
有人可能会问js 资源 Webpack 不能已经处理了吗为什么我们还要处理呢
原因是 Webpack 对 js 处理是有限的只能编译 js 中 ES 模块化语法不能编译其他语法导致 js 不能在 IE 等浏览器运行所以我们希望做一些兼容性处理。
其次开发中团队对代码格式是有严格要求的我们不能由肉眼去检测代码格式需要使用专业的工具来检测。
针对 js 兼容性处理我们使用 Babel 来完成 针对代码格式我们使用 Eslint 来完成 我们先完成 Eslint检测代码格式无误后在由 Babel 做代码兼容性处理
webpack打包配置Eslint
Eslintn 是可组装的 JavaScript 和 JSX 检查工具。 我们使用 Eslint关键是写 Eslint 配置文件里面写上各种 rules 规则将来运行 Eslint 时就会以写的规则对代码进行检查 下载依赖
yarn add eslint-webpack-plugin selint -D根目录新建 .eslintrc.js
module.exports { // 继承其他规则// 继承 Eslint 规则extends: [eslint:recommended],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: { // 解析选项ecmaVersion: 6,sourceType: module,},rules: { // 具体检查规则no-var: 2, // 不能使用 var 定义变量},
};修改 webpack.config.js 配置
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),],mode: development,
};webpack打包配置Babel
Babel 是主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法以便能够运行在当前和旧版本的浏览器或其他环境中。 下载依赖
yarn add babel-loader babel/core babel/preset-env -D定义 Babel 配置文件 新建 babel.config.js
module.exports {// babel/preset-env: 一个智能预设允许您使用最新的 JavaScript。
// babel/preset-react一个用来编译 React jsx 语法的预设
// babel/preset-typescript一个用来编译 TypeScript 语法的预设presets: [babel/preset-env],
};修改 webpack.config.js 配置
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),],mode: development,
};处理 Html 资源
yarn add html-webpack-plugin -D 修改webpack.config.js 配置文件
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, public/index.html),}),],mode: development,
};开发服务器自动化配置
yarn add webpack-dev-server -Dconst path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, public/index.html),}),],// 开发服务器devServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: development,
};当你应用了webpack 的开发服务器后你的开发模式的webpack 的命令也变了
npx webpack serve需要注意的是 当你使用开发服务器时所有代码都会在内存中编译打包并不会输出到 dist 目录下。开发时我们只关心代码能运行有效果即可至于代码被编译成什么样子我们并不需要知道。
开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事
编译代码使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html 资源等webpack 默认都不能处理这些资源所以我们要加载配置来编译这些资源
代码质量检查树立代码规范 提前检查代码的一些隐患让代码运行时能更加健壮。
提前检查代码规范和格式统一团队编码风格让代码更优雅美观。
生产模式介绍
生产模式是开发完成代码后我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度。
为了方便项目的构建随时将项目打包成可上线的代码以及随时进行本地的开发。 需要分别准备两个配置文件来放不同的配置 webpack.dev.js(开发模式配置文件) webpack.prod.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(开发模式配置文件)
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: undefined, // 开发模式没有输出不需要指定输出目录filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中// clean: true, // 开发模式没有输出不需要清空输出结果},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),],// 其他省略devServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: development,
};运行开发模式的指令
npx webpack serve --config ./config/webpack.dev.js修改 webpack.prod.js(生产模式配置文件)
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};运行生产模式的指令
npx webpack --config ./config/webpack.prod.js在packagejson 中 对开发和生产模式的运行指令进行配置
scripts: {start: npm run dev,dev: npx webpack serve --config ./config/webpack.dev.js,build: npx webpack --config ./config/webpack.prod.js},以后启动指令
开发模式npm start 或 npm run dev / yarn dev 生产模式npm run build / yarn build
Css处理
提取 Css 成单独文件
Css 文件目前被打包到 js 文件中当 js 文件加载时会创建一个 style 标签来生成样式 这样对于网站来说会出现闪屏现象用户体验不好 我们应该是单独的 Css 文件通过 link 标签加载性能才好 下载依赖
yarn add mini-css-extract-plugin -D修改配置webpack.prod.js (将原来的style-loader替换成现在的MiniCssExtractPlugin.loader) // 定义输出文件名和目录
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader, css-loader],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader, css-loader, sass-loader],},{test: /\.styl$/,use: [MiniCssExtractPlugin.loader, css-loader, stylus-loader],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};Css 兼容性处理
下载依赖
yarn add postcss-loader postcss post-preset-env -D在css-loader 后面加上 {loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},修改后的webpack.prod.js
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},less-loader,],},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},sass-loader,],},{test: /\.styl$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},stylus-loader,],},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};控制兼容性 我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。 开发中常用的配置为
{// 其他省略browserslist: [last 2 version, 1%, not dead]
}仔细看的话能发现上面的代码有很多的相同的部分现在对上面的代码做有个简单的封装。
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);
};module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders(less-loader),},{test: /\.s[ac]ss$/,use: getStyleLoaders(sass-loader),},{test: /\.styl$/,use: getStyleLoaders(stylus-loader),},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};好了。现在配置文件看着清爽多了
Css 压缩
在开发模式下我们肯定是希望打包后的代码越烧少简洁越好故我们可以对css进行打包压缩处理。 下载依赖
yarn add css-minizer-webpack-plugin -D
在webpack.prod.js 中进行引入和使用
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);
};module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders(less-loader),},{test: /\.s[ac]ss$/,use: getStyleLoaders(sass-loader),},{test: /\.styl$/,use: getStyleLoaders(stylus-loader),},{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],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),// css压缩new CssMinimizerPlugin(),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};至于html 的压缩 默认生产模式已经开启了html 压缩和 js 压缩 不需要额外进行配置 至此webpack 的基本使用差不多总结完毕
