webpack5在vue2中的实际使用

时间：2025-02-07 13:03:06

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

webpack大概的构建流程

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

配置文件默认下为当然也可以通过命令的形式指定配置文件，主要作用就是用于激活webpack的加载项和插件。webpack将中的各个配置项拷贝到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 设置环境变量 ,主要用于不同环境，做一些不同的配置

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

基本打包配置

根目录下创建 文件

模式

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

有两种模式：

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

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

入口

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

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

输出

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

  output: {
    filename: "js/[name].[chunkhash].js",  // 都以原来的文件名加上chunkhash命名
    path: (__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/", // html模板文件
      filename: "", // 打包后生成的html文件叫做
      favicon: (__dirname, "public/"),
      url: env == "dev" ? "" : ".",
      title: "justest",
    }),
    new VueLoaderPlugin(),
  ],

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

参考配置文档

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

<!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="."/><title>justest</title><link rel="icon" href="./"><script defer="defer" src="./js/main."></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 ></div></body></html>

2》处理vue文件

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

plugins:[new VueLoaderPlugin()]

打包多页面应用

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

entry,
plugins:[ ...htmlWebpackPlugins,]

相关文章