手动搭建简易版项目（vue）

最新推荐文章于 2024-05-16 17:54:12 发布

Dark_programmer

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量396

点赞数 1

分类专栏： vue webpack 文章标签： webpack

原文链接：https://juejin.cn/post/6921161482663100423#heading-8

版权

vue 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

一、创建webpack环境

1.创建文件夹并打开进行初始化

mkdir pro // 创建
cd pro // 打开
npm init -y // 初始化

初始化完成之后，会自动生成一个package.json文件，该文件是关于安装依赖到核心文件以及一些项目指令.

2.webpack配置

// webpack.config.js
const path = require("path"); //处理路径 

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
};

path : node提供关于处理文件和目录的路径的工具
path.resolve() : 会将路径或路径片段的序列解析为绝对路径
__dirname : 获取当前模块文件所在目录的完整绝对路径
entry : 配置打包入口文件（指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始）
output ：打包输出配置（告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist）

3.修改package.json的scripts属性:

//package.josn
...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
...

运行 yarn build，即可进行打包，如下所示即为成功
在这里插入图片描述

图中的 js/main.js就是我们通过 webpack将 main.js打包完后的代码，打开之后你会发现里面啥都没有，因为还没有进行内容编写
在这里插入图片描述

4.接下来我们给 index.html添加内容，然后通过 html-webpack-plugin插件，将 index.html作为模板，打包到 dist文件夹。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <!-- title内容是从webpack里配置的内容读取过来的 -->
</head>
<body>
  <div id="root"></div>
  <!-- root为操作的根结点-->
</body>
</html>

注意： 此时html文件里是没有进行编写script标签的

安装html-webpack-plugin插件：

html-webpack-plugin : 该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包

yarn add html-webpack-plugin -D

在webpack.config.js里进行引入使用

const path = require("path"); // node提供关于处理文件和目录的路径的工具
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板路径地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动 搭建项目开发环境", // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量Î
    }),
  ],
};

src文件夹下的main.js也来点内容

//  获取操作的根结点 并写入内容
const root = document.getElementById("root");
root.textContent = "bonnie正在学习手动搭建项目环境。。。";

打包后，打开dist文件夹下的index.html,即可显示如下内容
此时，该html文件下是有一个script标签的
在这里插入图片描述

二、引入vue3.x

引入vue3.x指令如下

yarn add vue@next -S

这里注意，要使用 vue@next 才能成功引入 Vue 3.x，否则就会引入 2.x 的最高版本。这里 -S 是指生产环境需要用到的包 — dependencies。同理 -D 表示开发环境需要的依赖。

引入成功之后，我们在 src 目录下新建 App.vue：

//App.vue
<template>
  <div>bonnie正在学习手动搭建项目环境。。。app</div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

标准的.vue模版页面，该如何将其展示在```root``根结点下?

打开main.js进行操作

//main.js
import { createApp } from "vue"; // Vue 3.x 引入 vue 的形式
import App from "./App.vue"; // 引入 APP 页面组件

const app = createApp(App); // 通过 createApp 初始化 app
app.mount("#root"); // 将页面挂载到 root 节点

注意： 我们现在编写了一个.vue结尾文件，浏览器是不会识别的。想要将其转换成浏览器识别的语言，需要以下几个插件:

vue-loader：它是基于 webpack的一个的 loader插件，解析和转换 .vue文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 loader 去处理如style-loader、 less-loader等等，核心的作用 就是提取 。
@vue/compiler-sfc： Vue 2.x时代，需要 vue-template-compiler插件处理 .vue内容为 ast， Vue 3.x则变成 @vue/compiler-sfc。

安装的时候注意 vue-loader 需要通过 yarn add vue-loader@next 安装最新版本。

安装指令如下:

yarn add vue-loader@next @vue/compiler-sfc

安装完成，进行引入使用

//webpack.config.js
const path = require("path"); // node提供关于处理文件和目录的路径的工具
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index"); // 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
  module: {
    rules: [
      {
        // 当匹配到 .vue结尾当文件，就会使用 vue-loader 进行转换
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板路径地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动 搭建项目开发环境", // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量Î
    }),
    new VueLoaderPlugin(), // 添加 VueLoaderPlugin 插件
  ],
};

VueLoaderPlugin的职责是将你定义过的其它规则复制并应用到 .vue文件里相应语言的块。例如，如果你有一条匹配/\.js$/的规则，那么它会应用到.vue文件里的 <script>块。

我们再次运行打包指令 yarn build，浏览器打开 dist/index.html如下所示：
在这里插入图片描述给App.vue添加样式,如下:

<template>
  <div>bonnie正在学习手动搭建项目环境。。。app</div>
</template>
<script>
export default {};
</script>
<style scoped>
div {
  color: yellowgreen;
}
</style>

打包又会报错：
在这里插入图片描述

意思就是说，少loader了，我们还需增加下面几个插件：

style-loader：将css样式插入到页面的 style标签中。
css-loader：处理样式中的 url，如 url('@/static/img.png')，这时浏览器是无法识别 @符号的。

安装插件指令如下：

yarn add style-loader css-loader -D

安装完成，进行使用

// webpack.config.js
const path = require("path"); // node提供关于处理文件和目录的路径的工具
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index"); // 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
  module: {
    rules: [
      {
        // 当匹配到 .vue结尾当文件，就会使用 vue-loader 进行转换
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        // 当匹配到css文件，机会使用 style-loader ， css-loader 进行转换
        test: /\.css/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板路径地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动 搭建项目开发环境", // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量Î
    }),
    new VueLoaderPlugin(), // 添加 VueLoaderPlugin 插件
  ],
};

再次运行打包指令 yarn build，浏览器打开 dist/index.html如下所示：
在这里插入图片描述

还有一个小插件是必备的， clean-webpack-plugin，它的作用就是每次打包的时候，都会把 dist 目录清空，防止文件变动后，还有残留一些老的文件，以及避免一些缓存问题。 webpack.config.js 配置如下：

// webpack.config.js
const path = require("path"); // node提供关于处理文件和目录的路径的工具
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index"); // 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除之前打得包

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
  module: {
    rules: [
      {
        // 当匹配到 .vue结尾当文件，就会使用 vue-loader 进行转换
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        // 当匹配到css文件，机会使用 style-loader ， css-loader 进行转换
        test: /\.css/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板路径地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动 搭建项目开发环境", // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量Î
    }),
    new VueLoaderPlugin(), // 添加 VueLoaderPlugin 插件
    new CleanWebpackPlugin(), // 将上次打得包清除
  ],
};

三、理解与配置 babel

babel 是什么

以我自己的理解， babel 是把我们随心所欲（最新特性一顿乱写）写的代码，编译成浏览器可识别的代码（低版本浏览器对新特性的支持不友好），就比如上述箭头函数，经过 babel 的转化后，就会变成普通的函数。

babel 的使用方式

它有三种使用方式：

使用单体文件。
命令行（babel-cli）。
构建工具如 webpack中的 babel-loader插件。
我们前端常用的就是第三种，构建工具的插件形式。毕竟现在大多数前端项目都是基于 webpack 构建的。

我们开始对上述项目做 babel 相关的配置，我们需要下面几个插件：

@babel/core： babel的核心库。
@babel/preset-env：它取代了 es2015 es2016 es2017，通过配置浏览器版本的形式，将编译的主动权，交给了插件。
babel-loader： webpack 的 loader 插件，用于编译代码，转化成浏览器读得懂的代码。

安装指令:

yarn add @babel/core @babel/preset-env babel-loader

安装完上述插件之后，进行使用

//webpack.config.js
const path = require("path"); // node提供关于处理文件和目录的路径的工具
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index"); // 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除之前打得包

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
  module: {
    rules: [
      {
        // 当匹配到 .vue结尾当文件，就会使用 vue-loader 进行转换
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        // 当匹配到css文件，机会使用 style-loader ， css-loader 进行转换
        test: /\.css/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不编译node_modules下的文件
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板路径地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动 搭建项目开发环境", // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量Î
    }),
    new VueLoaderPlugin(), // 添加 VueLoaderPlugin 插件
    new CleanWebpackPlugin(), // 将上次打得包清除
  ],
};

编译的时候，需要读取配置，最新的 babel配置文件需要在根目录下添加 babel.config.js文件：

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"] // 最近 2 个版本的浏览器
      }
    }]
  ]
}

这里 browsers 的配置，就是让 env 去识别要打包代码到什么程度，版本选的越新，打包出来的代码就越小。因为通常版本越低的浏览器，代码转译的量会更大。具体的配置可以参考

为了能体现出打包后的效果，我们在 App.vue 下添加一些代码：

// App.js
<template>
  <div>bonnie正在学习手动搭建项目环境。。。app</div>
</template>
<script>
export default {
  setup() {
    const testFunction = () => {
      console.log("滚!!!");
    };
    return {
      testFunction
    };
  }
};
</script>
<style scoped>
div {
  color: yellowgreen;
}
</style>

然后我们运行打包指令yarn build，打完包后我们浏览器打开 dist/index.html查看代码：

在这里插入图片描述
箭头函数变成了普通函数。

我再将 babel.config.js的目标浏览器配置改成如下所示：

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 1 chrome version"],
        },
      },
    ],
  ],
};

因为我指定了谷歌最新版本，所以打包之后，代码并没有从箭头函数变为普通函数。
在这里插入图片描述

四、配置 devServer

每次写完代码都要重新打包才能看到效果，这里需要一个实时更新最新代码的能力。于是 webpack-dev-server为我们实现了这个能力。
安装指令：

yarn add webpack-dev-server -D

安装完成后，进行使用

// webpack.config.js
const path = require("path"); // node提供关于处理文件和目录的路径的工具
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index"); // 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除之前打得包

module.exports = {
  mode: "development", // 环境模式
  entry: path.resolve(__dirname, "./src/main.js"), //配置打包入口
  output: {
    path: path.resolve(__dirname, "./dist"), // 打包输出路径
    filename: "js/[name].js", // 打包的静态资源文件名
  },
  module: {
    rules: [
      {
        // 当匹配到 .vue结尾当文件，就会使用 vue-loader 进行转换
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        // 当匹配到css文件，机会使用 style-loader ， css-loader 进行转换
        test: /\.css/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不编译node_modules下的文件
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // 要使用的 html 模板路径地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动 搭建项目开发环境", // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量Î
    }),
    new VueLoaderPlugin(), // 添加 VueLoaderPlugin 插件
    new CleanWebpackPlugin(), // 将上次打得包清除
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "./dist"),
    port: 8080,
    publicPath: "/",
  },
};

修改 package.json 运行脚本：

"scripts": {
	"dev": "webpack serve --progress --config ./webpack.config.js"
}

打包成功后如下：
在这里插入图片描述
在地址栏输入http://localhost:8080/即可查看到当前打包的页面，当你修改东西时，这里也会时时更新

转载自【掘金尼克陈】
在这里插入图片描述

Dark_programmer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手动搭建简易版项目（vue）

一、创建webpack环境1.创建文件夹并打开进行初始化mkdir pro // 创建cd pro // 打开npm init -y // 初始化初始化完成之后，会自动生成一个package.json文件，该文件是关于安装依赖到核心文件以及一些项目指令.2.webpack配置// webpack.config.jsconst path = require("path"); //处理路径 module.exports = { mode: "development", // 环境模式
复制链接

扫一扫

专栏目录