webpack创建vue项目

最新推荐文章于 2024-05-08 17:28:57 发布

旧城梦空

最新推荐文章于 2024-05-08 17:28:57 发布

阅读量479

点赞数 8

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_52102446/article/details/135931952

版权

使用webpack创建一个vue3+ts项目

初始化项目

1、创建一个webpack-vue文件夹
2、cd webpack-vue
3、npm init

执行之后会生成一个package.json文件

{
  "name": "y",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
}

安装webpack，和webpack-cli

npm install webpack webpack-cli --save-d

安装path

npm install path

在文件里面新建文件夹src，src/assets，src/views，App.vue，main.ts
再创建一个webpack.config.js

//webpack.config.js
const path = require("path");
module.exports = {
  mode: "development", //当前开发环境
  entry: "./src/main.ts", //入口文件
  output: {
    filename: "[hash].js", //打包后的文件名
    path: path.resolve(__dirname, "dist"), // 打包后的目录，必须是绝对路径
  },
  plugins: [],
};

在main.ts中写点数据，进行npm run build打包可以得到dist文件

eval("const a = 1;\r\n\n\n//# sourceURL=webpack://y/./src/main.ts?");

以上就说明打包成功

如何将js打包到html文件中

首先在src目录下创建一个index.html文件
解析html需要使用一个webpack的插件，html-webpack-plugin
安装npm install html-webpack-plugin -D
在webpack.config.js文件中配置一下这个插件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", //当前开发环境
  entry: "./src/main.ts", //入口文件
  output: {
    filename: "[hash].js", //打包后的文件名
    path: path.resolve(__dirname, "dist"), // 打包后的目录，必须是绝对路径
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 模板文件
    }),
  ],
};

再对项目进行打包，会发现dist打包的文件下多了一个html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    //打包的js就被引入进来了
  <script defer src="423e04b8c904ef49e180.js"></script></head>
  <body></body>
</html>

如何实现vue项目呢

首先安装vue

npm i vue

在之前创建的APP.vue页面中添加一些内容：<template>这是一个测试vue页面</template>，html页面中也需要加上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在main.ts中创建vue，并挂载

import { createApp } from 'vue'
import App from '../App.vue' // 你的Vue组件文件路径

const app = createApp(App)
app.mount('#app') // 挂载到id为app的DOM元素上

但是会发现，引入的App.vue文件一直报错，这是因为ts识别不了.vue,需要配置扩展

//  shims-vue.d.ts 
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

这个时候还需要安装vue-loader并配置引入

npm i vue-loader

//webpack.config.js
const { VueLoaderPlugin }= require("vue-loader");
 module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }],
  },
plugins:[
new VueLoaderPlugin(),//解析vue
]

再执行打包语句，发现可以打包成功，但是dist里面的js文件越来越多，这个时候就需要再安装一个插件进行dist文件清除了

npm install clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [
    new VueLoaderPlugin(), //解析vue
    new CleanWebpackPlugin(), //清理dist文件夹
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 模板文件
    }),
  ],

项目中如果还需要css，less也需要安装对应的loader，还可以在项目中配置别名
最终的文件如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  mode: "development", //当前开发环境
  entry: "./src/main.ts", //入口文件
  output: {
    filename: "[hash].js", //打包后的文件名
    path: path.resolve(__dirname, "dist"), // 打包后的目录，必须是绝对路径
  },
  module: {
    rules: [
      { test: /\.vue$/, use: "vue-loader" },
      {
        test: /\.less$/, //解析 less
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.css$/, //解析css
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.ts$/, //解析ts
        loader: "ts-loader",
        options: {
          configFile: path.resolve(process.cwd(), "tsconfig.json"),
          appendTsSuffixTo: [/\.vue$/],
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(), //解析vue
    new CleanWebpackPlugin(), //清理dist文件夹
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 模板文件
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), //别名
    },
  },
  devServer: {
    open: true, //自动打开浏览器
    port: 3000, //设置端口号
    hot: true, //热更新
    proxy: {}, //跨域配置
  },
};

运行项目可以直接安装webpack-dev-server, 配置package.json

npm i webpack-dev-server

//package.json
 "dev": "webpack-dev-server --config webpack.config.js"

通过npm run dev启动成功
在这里插入图片描述

旧城梦空

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
webpack创建vue项目

使用webpack创建一个vue3+ts项目。
复制链接

扫一扫

webpack创建vue项目

初始化项目

如何将js打包到html文件中

如何实现vue项目呢

“相关推荐”对你有帮助么？