webpack5在vue2中的实际使用

最新推荐文章于 2023-12-28 11:45:18 发布

bug丸

最新推荐文章于 2023-12-28 11:45:18 发布

阅读量2k

点赞数 1

分类专栏：打包构建文章标签： webpack 前端

本文链接：https://blog.csdn.net/weixin_50576800/article/details/127254054

版权

打包构建专栏收录该内容

9 篇文章 0 订阅

订阅专栏

webpack5在vue2中的打包配置-基本版

webpack大概的构建流程

1》初始化：从配置文件和shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数

配置文件默认下为webpack.config.js当然也可以通过命令的形式指定配置文件，主要作用就是用于激活webpack的加载项和插件。webpack将webpack.config.js中的各个配置项拷贝到options对象中，并加载用户配置plugins.

2》编译：根据entry找到所有的入口文件，针对每个模块module串行调用对应的loader去翻译文件内容，再找到该Module依赖的Module，递归地进行编译处理。

从entry入口文件触发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系

3》输出：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，最后根据配置确定输出的路径和文件名，把文件内容输出到文件系统

准备与配置脚本：

安装webpack

npm i webpack
npm i webpack-cli
npm i webpack-dev-server

 npm i cross-env

cross-env ：运行跨平台设置和使用环境变量的脚本； j就是设置环境变量用的；windows对NODE_ENV=development的设置环境变量方式的支持不够好
如果不配置，在scripts中使用 NODE_ENV=dev ；它会报错：‘NODE_ENV’ 不是内部或外部命令，也不是可运行的程序

cross-env使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量

设置环境变量并设置脚本命令

  "scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-dev-server",
    "test": "cross-env NODE_ENV=test npx webpack",
    "build": "cross-env NODE_ENV=production npx webpack",
    "lint": "vue-cli-service lint"
  },

NODE_ENV 设置环境变量 ,主要用于不同环境，做一些不同的配置

通过process.env.NODE_ENV 就可以拿到环境变量并使用

基本打包配置

根目录下创建 webpack.config.js 文件

模式

mode: env == “dev” ? “development” : “production”

有两种模式：

1>开发模式：代码没有压缩

2>生产模式：代码有压缩，我们的生产和测试环境都使用production模式

入口

entry: “./src/main.js”, // 打包的入口文件

一个路径字符串或对象，因为可能是单页面有可能是多页面

输出

静态资源：可以理解为前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。

  output: {
    filename: "js/[name].[chunkhash].js",  // 都以原来的文件名加上chunkhash命名
    path: path.join(__dirname, "myname"), // 在项目的根目录下创建一个myname的文件夹，所有打包文件都放到里面
    assetModuleFilename: "assets/[name].contenthash.[ext]",
    publicPath: (env = "dev" ? "/" : "./"), 
  },

filename：输出的文件命名方式

path：指定了webpack打包的总出口，是打包出来的所有文件在硬盘中的存储位置

publicPath：指定了打包之后这些静态资源的根目录,

assetModuleFilename：静态资源文件的命名

如果 publicPath:'/dist/static/，那么静态资源就会放在 dist文件夹下的 static 文件夹中。

loader

1》处理样式 less css

npm i style-loader@3.3.1 -D
npm i css-loader@6.7.1 -D
npm i less@4.1.3 -D
npm i less-loader@11.0.0 -D

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },

2》处理vue文件

npm i vue-loader -D
npm i vue-template-compiler -D
npm i vue-loader-plugin -D

在plugins中使用vue-loader-plugin，但是需要先安装vue-loader、vue-template-compiler

      {
        test: /\.vue$/,
        use: "vue-loader",
      },

3》处理js文件

npm install -D babel-loader @babel/core @babel/preset-env webpack

plugins

1》处理html文件

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader-plugin");

  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", // html模板文件
      filename: "index.html", // 打包后生成的html文件叫做index.html
      favicon: path.resolve(__dirname, "public/favicon.ico"),
      url: env == "dev" ? "" : ".",
      title: "justest",
    }),
    new VueLoaderPlugin(),
  ],

html-webpack-plugin：作用就是打包时生成一个html文件，并将静态资源文件插入这个html中

参考配置文档

下面是一个打包生成的的html文件：他插入了一个script标签，并且将打包后的入口文件main.js引进来了

<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href=".favicon.ico"/><title>justest</title><link rel="icon" href="./favicon.ico"><script defer="defer" src="./js/main.ac5cd784e559b0245eb5.js"></script></head><body><noscript><strong>We're sorry but justest doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

2》处理vue文件

const VueLoaderPlugin=require("vue-loader-plugin")

plugins:[new VueLoaderPlugin()]

打包多页面应用

// 遍历文件集合，生成所需要的 entry、htmlWebpackPlugins 集合
const entryFiles = glob.sync(path.resolve(__dirname, "./src/*/index.js"));
const htmlWebpackPlugins = [];
const entry = {};// 此时entry使用的是一个对象
entryFiles.map((item, index) => {
  const match = item.match(/src\/(.*)\/index\.js$/);
  const pageName = match[1];
  entry[pageName] = item;
  // 多页面所需要的模板集合
  htmlWebpackPlugins.push(
    new HtmlWebpackPlugin({ // 生成多个HtmlWebpackPlugin实例对象，产生多个html文件
      title: pageName,
      filename: `${pageName}.html`,
      template: path.join(__dirname, `public/index.html`),
      chunks: [pageName],
    })
  );
});

entry,
plugins:[ ...htmlWebpackPlugins,]

bug丸

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
webpack5在vue2中的实际使用

webpack5在vue2中的使用，基本配置；webpack的基本流程，webpack的基本概念及配置项，entry、mode、output、loader、plugin等；如何配置基本webpack.config.js来打包的vue单页面和多页面，脚本与环境变量的基本配置
复制链接

扫一扫