webpack打包练习与思考

最新推荐文章于 2022-11-11 15:24:32 发布
最新推荐文章于 2022-11-11 15:24:32 发布
阅读量422 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29329037/article/details/111411084
版权

一、简答题

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

主要环节

  • 安装webpack ,yarn add webpack@4.44.2 webpack-cli@3.3.3 -D

  • 配置webpack.config.js文件

  • 在webpack.config.js中配置entry, output以及mode

  • 根据要加载的文件类型，安装配置不同的loader加载器

  • 根据项目的需求，实现非loader的功能，安装相应的plugins

  • 配置devserver 开启自动化编译和浏览器预览

  • 配置optimization 进行项目优化等等操作。

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

Loader与Plugin的区别：

webpack只能识别javascript和json文件，而loader能够让webpack去处理更多类型的文件，让他们转换成有效的模块，形成依赖树。

Plugin插件就是处理除了loader转换模块之外的任务，比如打包优化、资源管理

Loader实现思路：

  • module.exports导出一个function接收形参source

  • 处理source文件

  • 返回一个js字符串

Plugins实现思路：

  • 导出一个插件类，在类的原型上定义apply方法

  • webpack初始化完成，apply方法上接收compiler对象

  • 通过compiler对象的钩子，定义在某个阶段注入插件，通过tabable定义钩子的触发方式

  • tabable中的方法接受插件名和一个函数，这个函数中接受compliation对象

  • 通过compliation对象上的属性，执行自己想要实现的功能，比如资源类的assets

  • 最后将处理后的结果给compliation上assets属性重新赋值

二、编程题

1、使用 Webpack 实现 Vue 项目打包任务 具体任务及说明：

说明：

  1. 安装和配置eslint

  • 删除package中的eslint相关的配置.

  • yarn add eslint ,然后运行eslint --init 初始化 .eslintrc.js ,根据提示安装响应的包

yarn add eslint-plugin-vue@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 -D
  1. 安装和配置prettier
  • 安装
yarn add prettier @vue/eslint-config-prettier eslint-plugin-prettier -D
  • 在.eslintrc.js中添加
module.exports = {

  extends: [
    ...
    '@vue/prettier'
  ],

}
  • 新建.prettierrc.js文件
// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true
};
  1. 安装和配置lint-stage和husky
  • 安装
yarn add lint-staged husky -D
  • 在package.json中添加
{
  "scripts": {
     "lint-staged:js": "eslint --ext .js,.vue,.ts",
    "lint:fix": "eslint --fix --cache --ext .js,.vue,.ts --format=pretty ./src",
    "lint:js": "eslint --cache --ext .js,.vue,.ts,--format=pretty ./src",
    "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
    "precommit": "lint-staged",
  },

  "lint-staged": {
    "**/*.{js,vue,ts,less,md,json}": [
      "prettier --write",
      "npm run lint:js",
      "git add"
    ]
  },
}
  1. 安装webpack
yarn add webpack@4.44.2 webpack-cli@3.3.3 -D
  1. 安装webpack-merge,配置多环境
yarn add webpack-merge -D

webpack.common.js中

module.exports = {
  entry: "./src/main.js",
  output: {},
};

webpack.dev.js中

const common = require("./webpack.common");
const { merge } = require("webpack-merge");
module.exports = merge(common, {
  mode: "development",
});
});

webpack.prod.js中

const common = require("./webpack.common");
const { merge } = require("webpack-merge");
module.exports = merge(common, {
  mode: "production",
});

});
  1. 在webpack.common.js中配置打包入口和输出
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filenaem: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
};
};
  1. 在package.json中配置build命令
{
   "scripts": {
    "build": "webpack --config webpack.prod.js",
  },
}

运行 yarn build命令 之后提示如下，

在这里插入图片描述

  1. 解析.vue结尾的文件
  • 安装
yarn add vue-loader  vue-template-compiler -D
  • 在webpack.common.js中
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {

 module: {
    rules: [
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
}
  1. 解析.css文件和.less文件
  • 安装
yarn add css-loader style-loader -D
  • webpack.common.js中
module.exports = {
 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
}
  1. 解析图片资源文件
  • 安装
yarn add url-loader file-loader -D
  • webpack.common.js中
module.exports = {

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 4096,
              fallback: "file-loader",
               esModule: false,
            },
          },
        ],
      },
    ],
  },
};
  1. 解析.js文件
  • 安装
yarn add babel-loader @babel/core @babel/preset-env @vue/cli-plugin-babel eslint-loader -D
  • webpack.common.js中
module.exports = {
       module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                    'eslint-loader',
                ],
            },
        ],
    },
}
  1. CleanWebpackPlugin、ProgressPlugin、HtmlWebpckPlugin

CleanWebpackPlugin每次构建前清除目标目录

HtmlWebpckPlugin根据index.html模板生成html文件

ProgressPlugin显示webpack构建的进度

  • 安装
yarn add clean-webpack-plugin html-webpack-plugin -D
  • webpack.prod.js中
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'vue-app-base',
            template: 'public/index.html',
        }),
    ],
})
}

执行yarn build 出现BASE_URl is not defined

这个错误出现的原因是因为public下面的index.html存在一个全局变量的BASE_URL这个时候需要用DefinePlugin定义全局变量

webpack.prod.js中添加如下

module.exports = merge(common, {

    plugins: [
        new webpack.DefinePlugin({
            BASE_URL: JSON.stringify('/'),
        }),
       .....
    ],
})
  1. 复制public中文件到dist目录中
  • 安装
yarn add copy-plugin-webpack@5.1.2 -D
  • webpack.prod.js中
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    plugins: [
    new CopyPlugin([
            {
                from: path.join(__dirname, 'public'),
                to: path.join(__dirname, 'dist'),
                ignore: [
                    '.DS_Store',
                    {
                        glob: 'index.html',
                        matchBase: false,
                    },
                ],
            },
        ]),
    ]
}
  1. 开启server并自动编译
  • 安装
yarn add webpack-dev-server -D
  • webpack.dev.js中
module.exports = {
 devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        open: true,
        port: 9000,
    },
}
  • package.json中配置
{
   "scripts": {
    "serve": "webpack-dev-server --config webpack.dev.js --watch",
  },
}
  1. 配置打包优化
  • 安装
yarn add terser-webpack-plugin -D
  • webpack.prod.js中
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
        ],
        splitChunks: {
            chunks: 'all',
            minChunks: 1,

            cacheGroups: {
                vendors: {
                    name: 'chunk-vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: 'all',
                },
                common: {
                    name: 'chunk-common',
                    minChunks: 2,
                    chunks: 'initial',
                    priority: -20,
                },
            },
        },
        runtimeChunk: {
            name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
        },
    },
}
  1. 最后调整开发和生产的配置，如下

webpack.common.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/main.js',
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                    'eslint-loader',
                ],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                test: /\.vue$/,
                use: ['vue-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|webp)(\?.*)?$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 4 * 1024,
                            fallback: 'file-loader',
                            esModule: false,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            BASE_URL: JSON.stringify('/'),
        }),
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            title: 'vue-app-base',
            template: 'public/index.html',
        }),
    ],
}

webpack.dev.js

const path = require('path')
const common = require('./webpack.common')
const { merge } = require('webpack-merge')
module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        open: true,
        port: 9000,
    },
})

webpack.prod.js

const common = require('./webpack.common')
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const path = require('path')
module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
        ],
        splitChunks: {
            chunks: 'all',
            minChunks: 1,

            cacheGroups: {
                vendors: {
                    name: 'chunk-vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: 'all',
                },
                common: {
                    name: 'chunk-common',
                    minChunks: 2,
                    chunks: 'initial',
                    priority: -20,
                },
            },
        },
        runtimeChunk: {
            name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
        },
    },
    plugins: [
        new CleanWebpackPlugin(),

        new CopyPlugin([
            {
                from: path.join(__dirname, 'public'),
                to: path.join(__dirname, 'dist'),
                ignore: [
                    '.DS_Store',
                    {
                        glob: 'index.html',
                        matchBase: false,
                    },
                ],
            },
        ]),
    ],
})

先下载任务的基础代码 百度网盘链接: https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd

这是一个使用 Vue CLI 创建出来的 Vue 项目基础结构

有所不同的是这里我移除掉了 vue-cli-service（包含 webpack 等工具的黑盒工具）

这里的要求就是直接使用 webpack 以及你所了解的周边工具、Loader、Plugin 还原这个项目的打包任务

尽可能的使用上所有你了解到的功能和特性

作业要求

本次作业中的编程题要求大家完成相应代码后（二选一）

  1. 简单录制一个小视频介绍一下实现思路，并演示一下相关功能。

  2. 提交一个项目说明文档，要求思路流程清晰。

最终将录制的视频或说明文档和代码统一提交至作业仓库。

Tommy·Yang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Webpack的习题
Baron的技术blog
06-10 2676
1.grunt、webpack和gulp三个构建工具中，其中( )是任务流工具2( )是模块打包工具。（A） A.grunt和gulp，webpack B.webpack, grunt和gulp C.webpack和grunt，gulp C.gulp，webpack和grunt 2.下列关于常见的Loader的描述中有误的是（C） A.source-map-loader：加载额外的 Source Map 文件，以方便断点调试 B.image-loader：加载并且压缩图片文件 C.style-loader
Webpack打包慢问题的完美解决方法
08-31
Webpack 打包慢问题的完美解决方法 在使用 Webpack 打包项目时，经常会遇到打包速度慢的问题，这是因为 Webpack 需要处理大量的模块，从而导致打包速度慢。为了解决这个问题，我们需要了解 Webpack 的工作原理和...
webpack 4 练习
ahh36680的博客
03-25 113
第一阶段：管理资源学习 [版本version:] 1.0.0 1.基本的安装与配置 2.通过loader引入其他类型文件 3.显示依赖 第二阶段：输出管理 [版本version] 1.1.0 上面我一直是在手动的管理输出文件，dist下的index.html。可以想象如果项目变动复杂的话如此做法肯定会带来很多的不方便。该如何解决呢？ 1.html-webpack...
练习2-Webpack实操
sharryling
03-24 206
1.安装nrm 安装npm 安装cnpm npm i cn cnpm -g (i:install -g:global) 2.安装webpack 进入一个文件夹（最好用英语） 安装全局 webpack webpack-cli npm i webpack -g 安装当前 webpack webpack-cli npm i webpack --save-dev 3.步骤 步骤一...
webpack练习
weixin_46544034的博客
09-16 193
webpack联系与笔记
解决vue+webpack打包路径的问题
08-27
在开发Vue.js应用程序时，通常会使用Webpack进行模块打包。然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解...
详解webpack打包nodejs项目(前端代码)
10-18
Webpack 打包 Node.js 项目（尤其是前端代码）的场景通常发生在前端应用需要与后端服务紧密结合时，例如用 Node.js 作为服务器，而前端代码与后端接口紧密耦合。 在 Webpack 配置中，有几个关键的概念： 1. **入口...
详解如何使用webpack打包JS
01-19
如何使用webpack打包JS 我们在命令行中输入：webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output webpack-cli [options] <entries> --output ...
webpack打包js的方法
10-18
Webpack是一个用于前端资源管理和打包的工具。其工作原理是基于项目中的依赖关系来分析项目结构，然后将这些依赖打包为浏览器可以识别的静态资源文件。其核心功能包括模块化、代码转译、压缩、优化等。Webpack通过其...
webpack练习模板
cimo的博客
06-28 7625
//获取当前文件路径 let path = require('path') //安装html-webpack-plugin依赖： cnpm install html-webpack-plugin --save-dev let HtmlWebpackPlugin = require('html-webpack-plugin') //console.log(path.resolve(__dirname,'dist')) module.exports = { // 入口文件 entry:'.
Webpack的基础练习及使用
qq_43468165的博客
07-09 236
阅读文章：公司的老大哥儿写的给我们小菜鸡前端阅读的，对着他的思路和webpack官方练习使用 。原文基础webpack使用教程 安装配置，以及一个简单的打包 mkdir projectname //新建一个文件夹 cdprojectname //进入文件夹 npm 的安装和换源可以看 这篇文章 npm init -y //使用npm初始化项目,x形成的文件package.json用来记录项目中使用到的插件 及其版本。 yarn add webpack webpack-cli --dev /...
webpack基础练习
m0_65382120的博客
05-12 180
首先创建一个文件夹 在根目录下初始化项目 执行以下代码 npm init -y 就会生成一个json文件
webpack 配置练习
hs1219462412的博客
11-11 213
webpack配置练习～
[提高总结七]webpack练习1
灵眼儿上方
03-15 372
1，实现了web pack的基本用法，能打包应用，管理源码。 2，实现了css-loader，style-loader，json-loader的效果。 3，实现了web pack-dev-server的使用，能够实时刷新效果，这个很赞啊。 webpack.json { "name": "learnwebpack", "version": "1.0.0", "descriptio
webapck练习和总结
G294992891的博客
03-05 174
第一 webpack 正确安装方式 笔记： 首先安装webpack避免全局安装，应该在当前项目安装，否则会导致版本不一样会发生不一样的错误。 npx webpack -v 查看webpack安装的版本号和webpack-cli npm info webpack 查看webpack版本号 注意：webpack4.25.1版本 配合webpack-cli3.1.2在npx webpack index.js 打包成功 webpack5.24.2版本在npx webpack index.js 不能打包成功 会出现意
webpack4.0+版本练习
原鑫的个人博客
11-28 771
webpack安装 确保安装 Node.js 的最新版本 本地安装 (对于大多数项目，官方建议本地安装。这可以使我们在引入破坏式变更的依赖时， 更容易分别升级项目) 最新的webpack版本是： // 要安装最新版本或特定版本，请运行以下命令之一： npm install --save-dev webpack npm install --save-dev webpack@&lt;vers...
webpack简单的打包和使用（初级练习推荐）
无简介！！
09-27 783
webpack简单的用法
当下流行的打包工具Webpack从入门到熟练系统学习教程（一）
编程教培一线讲师
04-17 1159
我将分五次把Webpack学习总结清楚 这一节讲解Webpack的一些基础概念 学习Webpack之前需要有一定的npm基础知识 一、什么是Webpack Webpack 是一个前端资源构建工具，静态模块打包器。它将所有资源文件（js/css/images/html）模块化处理并进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 二、五个核心概念 Entry 入口(Entry)指示Webpack以哪个文件为入口开始打包，分析构建内部依赖图 Output 输出（Output）指示Webpac.
webpack打包与不打包的区别
最新发布
06-11
Webpack 是一个专门用于打包 JavaScript 模块的工具，它的主要作用就是将各种 JavaScript 模块打包成一个或多个 JavaScript 代码文件，以便浏览器能够加载和执行它们。相比不打包的情况，Webpack 打包的好处有： 1....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值