项目基本结构目录：

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

        <App></App>

    </div>

    <script src="/dist/build.js"></script>

</body>

</html>

package.json

{

  "name": "node_simple",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "dev": "webpack-dev-server --open --hot --config webpack.dev.js",

    "build": "webpack --progress --hide-modules --config webpack.prod.js"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "vue": "^2.6.11"

  },

  "devDependencies": {

    "babel-core": "^6.26.3",

    "babel-loader": "^8.1.0",

    "babel-preset-env": "^1.7.0",

    "babel-preset-stage-3": "^6.24.1",

    "css-loader": "^3.4.2",

    "file-loader": "^6.0.0",

    "node-sass": "^4.13.1",

    "sass-loader": "^8.0.2",

    "uglifyjs-webpack-plugin": "^2.2.0",

    "vue-loader": "^15.9.1",

    "vue-style-loader": "^4.1.2",

    "vue-template-compiler": "^2.6.11",

    "webpack": "^4.42.1",

    "webpack-cli": "^3.3.11",

    "webpack-dev-server": "^3.10.3",

    "webpack-merge": "^4.2.2"

  }

}

webpack.common.js

var path = require('path');

var webpack = require('webpack');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

    entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包

    output: {

        path: path.resolve(__dirname, './dist'), // 项目的打包文件路径

        publicPath: '/dist/', // 通过devServer访问路径

        filename: 'build.js' // 打包后的文件名

    },

    resolve: {

        alias: {

            'vue$': 'vue/dist/vue.esm.js'

        }

    },

    plugins: [

        new VueLoaderPlugin()

    ],

    module: {

        rules: [

            {

                test: /\.css$/,

                use: ['vue-style-loader', 'css-loader']

            },

            {

                test: /\.(png|jpg|gif|svg)$/,

                use: 'file-loader'

            },

            {

                test: /\.vue$/,

                loader: 'vue-loader',

                options: {

                    loaders: {

                        'css': [

                            'vue-style-loader',

                            'css-loader'

                        ]

                    }

                }

            }

        ]

    }

};

webpack.dev.js

const merge = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {

    mode: 'development',

    devtool: 'inline-source-map',

    devServer: {

        historyApiFallback: true,

        overlay: true

    },

});

webpack.prod.js

const merge = require('webpack-merge');

// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const common = require('./webpack.common.js');

module.exports = merge(common, {

    mode: 'production',

    devtool: 'source-map',

    plugins: [

        // 使用了该插件后，在打包build的时候，Vue中报错"("相关

        // new UglifyJSPlugin({

        //     sourceMap: true

        // })

    ]

});

src/main.js

import Vue from 'vue';

var say = require('./util');

import App from './App.vue';

import './style.css';

say();

var app = new Vue({

    el: '#app',

    data: {

        message: 'Hello Vue2!'

    },

    components: { App }

});

src/style.css

body {

    /* background: url('./img/1.jpg'); */

}

src/util.js

module.exports = function say() {

    console.log('hello world');

}

src/App.vue

<template>

  <div id="app">

    <h1>{{ msg }}</h1>

    <img :src="url" class="pic_search">

    <input type="text" v-model="msg">

  </div>

</template>

<script>

// 说明图片也作为模块导入，不然不能查看到图片

import pic_search from './img/1.jpg';

export default {

  name: 'app',

  data () {

    return {

      msg: 'Welcome to Your Vue.js',

      url: pic_search

    }

  },

  created() {

    this.fetchData();

  },

  methods: {

    getData() {

        return 'grand_ranfs';

    },

    fetchData() {

      const data = this.getData();

      this.msg = data;

    }

  }

}

</script>

<style scoped>

  h1 {

    color: green;

  }

  .pic_search {

    width: 20px;

    height: 20px;

  }

</style>

webpack与vue使用的更多相关文章

  1. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  2. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  3. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  4. webpack 与 vue 打包体积优化

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  5. webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  6. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  7. webpack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. webpack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. webpack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  10. webpack结合vue使用（五）

    webpack结合vue使用步骤如下: 安装 vue 的包 : cnpm i vue -S 由于在 webpack 中,锐减使用 .vue 这个组件模板文件定义组件,所以需要安装能解析这种文件的第三方 ...

随机推荐

  1. linux之DHCP服务

    1.DHCP介绍(动态主机配置协议)  DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议, 主要用途:给内部网络或网络服务供应 ...

  2. 对App应用架构搭建的一些思考

    当下随着App开发技术的越来越成熟,多人协同开发必不可少,一个团队中每个人的代码风格.技术栈都存在差异,因此统一一套成熟的开发架构必不可少,可以提高开发效率.统一代码风格.为项目维护提供便利. 当下A ...

  3. 面试必看！靠着这份字节和腾讯的面经，我成功拿下了offer！

    准备 敲定了方向和目标后就开始系统准备,主要分为以下几个方面来准备. 算法题 事先已经看过别人的社招面经知道头条每轮技术面都有算法题,而这一块平时练习的比较少,校招时刷的题也忘记了很多.因此系统复习的 ...

  4. IMX8移植cpufreq子系统

    一.简介         CPUFreq子系统位于 drivers/cpufreq目录下,负责进行运行过程中CPU频率和电压的动态调整,即DvFS( Dynamic Voltage Frequency ...

  5. 巧妙利用Camtasia制作网课

    随着互联网的快速发展,网络学习变得非常流行.这种躺在床上就可以获取知识的方法让大家渐渐地都喜欢上了学习,那么我们是否想要了解一下网课的幕后制作呢. 今天我给大家带来的便是巧妙利用Camtasia进行网 ...

  6. 使用ABBYY FineReader将文档保存为电子书形式

    运用ABBYY FineReader 15的OCR识别技术,不仅能将PDF文档.图像.扫描页面等保存为可编辑的格式,方便用户的进一步编辑使用:而且还能直接转换为电子书的格式,方便用户使用更为便携的电子 ...

  7. 用Camtasia设计微课视频封面，让课程更加高大上

    在网络时代,尤其现在疫情影响只能线上学习,微课的应用前景已经越来越广了.但是想把微课做好,只有内容与录制精细是不够的,还需要一个精美的封面来吸引学生.接下来,小编就用微课制作软件Camtasia 20 ...

  8. H5系列之video自己编写控制栏

    首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...

  9. ZAB

    ZAB=ZooKeeper Atomic Broadcast ZooKeeper原子消息广播协议,支持崩溃回复的原子广播协议. zk使用一个单一的主进程来接受并处理客户端的所有事务请求,并采用ZAB的 ...

  10. VS Code C++ 项目快速配置模板

    两个月前我写过一篇博客 Windows VS Code 配置 C/C++ 开发环境 ,主要介绍了在 VS Code 里跑简单 C 程序的一些方法.不过那篇文章里介绍的方法仅适用于单文件程序,所以稍微大 ...