用 (webpack 5 + vue-loader) 手把手构建 vue手脚架

首先我们找到一个空文件架 终端执行

npm install webpack webpack-cli vue vue-loader vue-template-compiler css-loader style-loader babel-loader @babel/core @babel/preset-env --sav

这里我们引入的工具分别是

webpack 今天的主角 一款优秀的前端打包工具
webpack-cli webpack提供的一个终端打包命令
vue vue的语法依赖
vue-loader 将vue语法转成js语法
vue-template-compiler 帮助识别vue中的元素部分为页面代码
css-loader 帮助系统读取css代码
style-loader 样式标签处理
babel-loader 将新的js语法转意成老的js语法 加强语法的兼容性
@babel/core 的一个库
@babel/preset-env @babel/preset是babel-loader的一个配置集合env代表读取最新的js代码

在根目录下创建 src
创建 App.vue
App.vue 参考代码如下

<template>
    <div id = "test">{{ test }}div>
template>

<script>
export default {
    data() {
        return {
            test: 'Hello world'
        }
    }
}
script>

<style scoped>
    #test {
        color: blue;
    }
style>

在src下创建main.js
main.js 参考代码如下

import Vue from 'vue'
import App from './App.vue'

new Vue ({
    el: '#app',
    render: (h) => h(App)
})

在根目录创建webpack.config.js
webpack.config.js惨开代码如下

//通过node获取到当前文件的位置
const path = require('path')

//在vue-loader中拿到VueLoaderPlugin函数
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    //设置当前入口文件
    entry: './src/main.js',
    //出口配置
    output: {
        filename: 'bundle.js',
        //生成的文件位置
        path: path.resolve(__dirname, './distribution')
    },
    module: {
        rules: [
          {
            //转换文件格式
            test: /\.vue$/,
            //文件打包方式
            use: ["vue-loader"]
          },
          {
            //转换文件格式
            test: /\.css$/,
            //文件打包方式
            use: ["style-loader","css-loader"]
          },
          {
            //转换文件格式
            test: /\.js$/,
            //文件打包方式
            use: {
                loader: "babel-loader",
                options: {
                    presets: ['@babel/preset-env']
                }
            }
          },
          {
            //转换文件格式
            test: /\.(png|jpg|svg|gif)$/,
            //文件打包方式
            type: "asset",
            generator: {
              filename: `./assets/[contenthash][ext]`
            }
          }
        ]
    },
    //webpack插件配置
    plugins: [
      new VueLoaderPlugin()
    ],
}

打开package.json 添加上

  "scripts": {
    "serve": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
  },

用 (webpack 5 + vue-loader) 手把手构建 vue手脚架_第1张图片
在根目录创建index.html
index.html参考代码如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <div id = "app">div>
    <script src = "./distribution/bundle.js">script>
body>
html>

然后在终端执行

npm run serve

用 (webpack 5 + vue-loader) 手把手构建 vue手脚架_第2张图片
打包成功 然后我们的index.html已经按路径引入了这个js 也写了他需要的 id为app的元素

我们打开index.html
用 (webpack 5 + vue-loader) 手把手构建 vue手脚架_第3张图片
和我们预期的效果一模一样

你可能感兴趣的:(vue.js,webpack,javascript)