webpack搭建vue运行环境

最新推荐文章于 2023-11-01 18:44:09 发布

阿Faaaa

最新推荐文章于 2023-11-01 18:44:09 发布

阅读量160

点赞数

文章标签： webpack vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47272010/article/details/129146196

版权

1.基础版配置（js，css，vue）

打包命令 yarn build

运行命令 yarn serve

1.1配置vue需要的包

npm init -y //初始化配置文件

yarn add webpack -D//webpack提供API

yarn add webpack-cli -D//webpack-cli提供命令

npx webpack -v //检测webpack是否安装成功

yarn add html-webpack-plugin -D

yarn add vue // 下载vue

yarn add css-loader -D //css模块的源代码进行转换

npm install -D vue-loader vue-template-compiler //vue模块的源代码进行转换 

yarn add babel-loader -D //js模块的源代码进行转换

yarn add @babel/core -D //js模块的源代码进行转换

配置vue必下的包

npm install -D vue-loader//vue模块的源代码进行转换

vue-template-compiler 这个包主要是用来解析template

yarn add vue // 下载vue

1.2配置package.json打包

//配置运行打包 
"scripts": {
    "build": "webpack --config webpack.config.js --mode production",
    "serve": "webpack serve --config webpack.config.js --mode development"
  },

1.3webpack.config.js

在根目录下创建一个public /index.html

//配置挂载app html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%=htmlWebpackPlugin.options.title%>
    </title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

在根目录下创建webpack.config.js

//引入绝对路径
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports ={
    //配置入口
    entry: path.resolve(__dirname, "src/main.js"),
        //出口
        output: {
        path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].[chunkhash:8].js',//filename可以指定一个格式化字符串
                clean: true//每次打包 自动删除之前打包的文件
    },
    plugins: [
        new HtmlWebpackPlugin({
            // template: "./public/index.html"
            template: path.resolve(__dirname,  "public/index.html"),
            inject: "body",//把js脚本注入到body结束标签之前
            filename: "index.html",//指定打包成功后页面的名字
            title: "title-name",//用来指定页面中带title标题的
            favicon: path.resolve(__dirname,  'public/zzx_favicon.ico')
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
        ]
    },
}

{

test: /\.vue$/,

use: ['vue-loader'] //这个是解析vue文件

{

test: /\.css$/,

use: ['vue-style-loader', 'css-loader']//这个用来抽离vue文件中的style

1.4在src下创建一个App.js

<template>
    <div class="example">{{ msg }}</div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello vue!'
        }
    }
}
</script>

<style>
.example {
    color: red;
}
</style>

1.5在src下创建一个main.js

import {createApp} from 'vue'
import App from './APP.vue'
//!Vue2版本是命令方式使用，通过new Vue去创建Vue实例
// new Vue({
//     el: '#app',
//     render: h => h(App)
// })
//!这里使用Vue3版本源码架构 使用createApp
createApp(App).mount('#app')

2.配置图片解析

yarn add file-loader -D 终端下载

 //配置图片模块解析
            {
                test: /\.png|jpg|svg|gif|jpeg|webp$/,
                //如果使用 url-loader处理  图片会被打包成base64字符串 打包在js文件中
                type: 'asset/resource',//相当于file-loader
                generator: {
                    filename: "img/[name].[contenthash:8][ext]"//ext 原本文件后缀
                }
            },