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

瑞晟技术服务中心-耿瑞

已于 2022-01-30 09:22:52 修改

阅读量2.5k

点赞数 4

文章标签： vue.js webpack javascript

于 2022-01-29 12:57:45 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/122741695

版权

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

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"
  },

在这里插入图片描述
在根目录创建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>Document</title>
</head>
<body>
    <div id = "app"></div>
    <script src = "./distribution/bundle.js"></script>
</body>
</html>