Document

# webpack5-study **Repository Path**: DoraZC/webpack5-study ## Basic Information - **Project Name**: webpack5-study - **Description**: webpack5学习 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-12-02 - **Last Updated**: 2022-01-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # webpack5 学习笔记（5.64.4 版本） ## 1.基本安装 > 1.创建 webpack5-study 文件夹，用 vscode 打开，通过终端运行： ``` npm init -y npm install -g yarn //如果安装过yarn就不用运行了 yarn add webpack webpack-cli -D ``` > 2.在 webpack5-study 目录下新建 src 文件夹并新建 main.js ``` //main.js console.log('hello webpack') ``` ## 2.配置出入口 > 新建 build/webpack.common.js 配置入口 ``` //webpack.common.js const path = require('path') module.exports = { entry: path.resolve(__dirname, "../src/main.js"), } ``` > 配置出口只能有一个出口，这里指定输出路径为'dist' ``` //webpack.common.js module.exports = { output: { path:path.resolve(__dirname,'../dist'), filename: '[name].bundle.js', clean:true //每次构建清除dist包 }, } ``` > 在 package.json 中，我们创建一个运行 webpack 命令构建脚本 ``` //package.json "scripts": { "build":"webpack --config build/webpack.common.js", } ``` > 写到这里就可以执行了在终端输入命令 ``` npm run build ``` > 在 dist 文件夹下会生成 main.bundle.js 也可以是别的名称设置别名即可 webpack.common.js 有相应的代码 ## 3.安装 plugin 用于打包优化、资源管理、注入环境变量 ### 1.html-webpack-plugin html-webpack-plugin 将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle > 1.安装 ``` yarn add -D html-webpack-plugin ``` > 2.新建 public/index.html ``` Document

123

``` > 3.配置 ``` //webpack.common.js const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [ new HtmlWebpackPlugin({ inject:'body',//打包的js放入指定的标签内默认是放在header中 scriptLoading:'blocking',//去掉js标签defer 默认有defer template: path.resolve(__dirname, '../public/index.html'), filename: 'index.html', }), ], } ``` > 4.运行 npm run build 可以看到 dist 下多了 index.html 文件，并且打包生成的 main.bundle.js 在 index.html 中通过 script 标签被引入 ### 2.progress-bar-webpack-plugin 作用：增加编译进度条 > 1.安装 ``` yarn add progress-bar-webpack-plugin -D ``` > 2.配置 ``` //webpack.common.js const chalk = require("chalk"); const ProgressBarPlugin = require("progress-bar-webpack-plugin"); module.exports = { plugins: [ // 进度条 new ProgressBarPlugin({ format: ` :msg [:bar] ${chalk.green.bold(":percent")} (:elapsed s)`, }), ], }; ``` > 3.打开终端执行 npm run build 可查看 ## 4.loader 用于对模块的源代码进行转换 > loader 都在 module 下的 rules 中配置 > > > loader 配置项包括： > > > > - test 正则校验（必须） > > - loader 调用 loader 的名称 / use 链式调用 loader （二选一） > > - include/exclude 手动添加必修处理的文件/文件夹或屏蔽不需要处理的文件/文件夹（可选） > > - options 为 loaders 提供额外的设置选项（可选） > > tip：use 链式调用，都是从右向左解析，需注意调用 loader 的顺序。loader 要记住，面试经常被问到有哪些 loader 以及其作用 ### 1.css-loader 与 style-loader > 作用：加载 css > css-loader：会对@import 和 url()进行处理 > style-loader：将 CSS 注入到 JavaScript 中，通过 DOM 操作控制 css - 安装 ``` yarn add css-loader style-loader -D ``` - 在 webpack.common.js 中进行配置 ``` module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], //从右向左解析 }, ], }, ``` - 新建 src/assets/style/index.css ``` body{ background-color: aqua; } ``` - 在 main.js 中引入 ``` import './assets/style/index.css' ``` > 重新编译 npm run build，在浏览器中打开 dist/index.html，可以看到 css 已生效 ### 2.url-loader 与 file-loader > 作用：加载 images 图像，字体，视频资源 > file-loader：将文件输出到指定目录 > url-loader：将文件转为 base64 内联到 bundle 中，如果超出限制的大小，则使用 file-loader 将文件移动到输出的目录中 - 安装 ``` yarn add file-loader url-loader -D ``` - rules 下增加配置 ``` { test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/, //加载图片资源 loader: "url-loader", type: 'javascript/auto',//解决asset重复 options: { esModule: false, //解决html区域,vue模板引入图片路径问题 limit: 1000, name: "static/img/[name].[hash:7].[ext]", }, }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//加载视频资源 loader: "url-loader", options: { limit: 10000, name: "static/media/[name].[hash:7].[ext]", }, }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, //加载字体资源 loader: "url-loader", options: { limit: 10000, name: "static/fonts/[name].[hash:7].[ext]", }, }, ``` - 拓展 > 在 webpack5 中，内置了资源模块（asset module），代替了 file-loader 和 url-loader 例如:加载图片资源 ``` //在webpack.common.js rules下增加 { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset", generator: { filename: "static/img/[name].[hash:7].[ext]", }, }, ``` > tip：虽然 webpack5 新增了内置模块，但建议使用 file-loader 和 url-loader。因为当前 create-react-app 脚手架的 webpack 是 4.44.2 版本，且面试官会问有哪些 loader 时，可以多说两个熟悉的 ### 3.sass-loader - 安装 > yarn add sass-loader node-sass -D \*修改原先的 css 规则，改为： ``` { test: /\.(css|scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] //从右往左编译的 }, ``` - 新建 src/assets/style/index.scss 文件 ``` $blue: blue; body{ color: $blue; } ``` - 在 main.js 中引入 index.scss ``` import './assets/styles/blue.scss' ``` > 重新编译，打开 dist/index.html，可以看到页面文字已变成蓝色 ### 4.postcss-loader > 作用：处理 css 的 loader > 配合 autoprefixer，css 增加浏览器内核前缀 - 安装： ``` yarn add -D postcss-loader autoprefixer ``` - 修改原先的 css 规则： ``` { test: /\.(css|scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader', { loader: "postcss-loader", }] } ``` - 在 package.json 新增 browserslist 配置 ``` "browserslist": [ "last 2 version", "> 1%", "iOS >= 7", "Android > 4.1", "Firefox > 20" ] 方式二新建.browserslistrc文件代码如下 last 2 version > 1% iOS >= 7 Android > 4.1 Firefox > 20 ``` - 在 style.css 中增加以下样式： ``` //在项目根目录下新建postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers:["> 1%","last 2 versions","not ie <=8"] }) ], } ``` /_ index.scss _/ #app div{ width: 200px; margin-top: 50px; transform: rotate(45deg); /_ 这个属性会产生浏览器内核前缀如 -webkit_/ } ``` ``` > 重新编译，打开 dist/index.html 查看效果可看到有前缀了 ### 5.babel-loader 作用：解析 ES6，JSX - 安装 > 现在 babel 已到 7 的版本，使用@区分其他非官方包 > Babel 其实是几个模块化的包： > @babel/core：babel 核心库 > babel-loader：webpack 的 babel 插件，让我们可以在 webpack 中运行 babel > @babel/preset-env：将 ES6 转换为向后兼容的 JavaScript > @babel/plugin-transform-runtime：处理 async，await、import()等语法关键字的帮助函数 > 运行命令： ``` yarn add @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime -D ``` - 配置 ``` //webpack.common.js //在rules下增加配置 { test: /(\.jsx|\.js)$/, use: ["babel-loader"], exclude: /node_modules/, }, ``` - 增加 babel 额外配置项根目录新建.babelrc ``` { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-runtime"] } ``` - 注意点 > babel-loader 8.x 对应@babel/core（7.x） > babel-loader 7.x 对应 babel-core 6.x - 测试 public/index.html 添加 es6 箭头语法 ``` ``` > 重新编译，打开 dist/index.html。通过点击可以看到信息被打印出来，说明 es6 解析成功 ### 6.html-loader 作用：将 HTML 导出为字符串，处理 HTML 中引入的静态资源 - 安装 ``` yarn add html-loader -D ``` - 配置 ``` { test: /\.html$/i, loader: "html-loader", options: { esModule: false, //在开发环境中启用false }, }, ```