vue依赖webpack的环境配置（一）

最新推荐文章于 2024-02-23 19:34:51 发布

EffIdong

最新推荐文章于 2024-02-23 19:34:51 发布

阅读量1.7k

点赞数

分类专栏： vue webpack

本文链接：https://blog.csdn.net/Efficiency9/article/details/77435165

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

创建项目

$ mkdir [project name]
$ cd [project name]
$ npm init

安装webpack、webpack-dev-server以及相关loader

# 安装webpack，webpack-dev-server
$ npm install webpack
$ npm install webpack-dev-server
# 为项目安装其他依赖
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并

css-loader：编译写入css

style-loader：把编译后的css整合进html

file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合

vue：vue主程序

vue-laoder：编译写入.vue文件

vue-html-loader：编译vue的template部分

vue-style-loader：编译vue的样式部分

vue-hot-reload-api：webpack对vue实现热替换

babel-core：ES2015编译核心

babel-loader：编译写入ES2015文档

babel-preset-es2015：ES2015语法

babel-preset-stage-0：开启测试功能

babel-runtime：babel执行环境

更多安装方式和loader解释参考文档https://doc.webpack-china.org/guides/getting-started/

新建index.html
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">{{message}}</div>
<!--“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载：-->
<!--bundle是分发代码-->
<script src="dist/bundle.js"></script>
</body>
</html>

创建/src/mian.js
新建src文件夹，然后在里面创建main.js

//js源文件
import Vue from "vue";
new Vue({
    el:'#app',
    components:{
        message:'test'
    }
});

配置webpack.configure.js
大多数项目会需要很复杂的设置，这就是为什么 webpack 要支持配置文件。这比在终端(terminal)中输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：

var path=require('path');
module.exports={
    //定义输入文件
    entry:'./src/main.js',
    // 输出文件
    output:{
        // 文件名
        filename:'bundle.js',
        // 文件地址
        path:path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            //vue转化
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            // css转化
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 图片转化
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]
    },
    resolve: {
// Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置

// 否则会报错：Failed to mount component: template or render function not defined.
    alias: {
            vue: 'vue/dist/vue.js'
        }
        // extensions: ['', '.js', '.vue']
    }
};

运行
我们在终端下输入命令 webpack
打开浏览器可以看到效果
进一步实现vue的组件化思想

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>wewew</h1>
    <!--hello模块-->
    <hello></hello>
</div>
<!--<div id="app">{{message}}</div>-->
<script src="dist/bundle.js"></script>
</body>
</html>

新建hello.vue

<template>
    <strong>{{vueMsg}}</strong>
</template>
<script>
    module.exports = {
        data() {
            return {vueMsg:'Vue hello world'}
        }
    }
</script>
<style scoped>
    strong{
        background-color: #f00;
    }
</style>

在main.js中加入对hello.js的引入

import helloVue from './../view/hello.vue';
import Vue from "vue";
// var helloVue=require('./../view/hello.vue')
new Vue({
    el:'#app',
    components:{
    //hello
        hello:helloVue
    }
});

再次webpack一下，我们就可以在浏览器上看到效果

EffIdong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue依赖webpack的环境配置（一）

创建项目$ mkdir [project name]$ cd [project name]$ npm init安装webpack、webpack-dev-server以及相关loader# 安装webpack，webpack-dev-server$ npm install webpack$ npm install webpack-dev-server# 为项目安装其他依赖$ npm i
复制链接

扫一扫