这个配置生成出来的代码只能支持ES6的浏览器下正常显示。

npm init -y

npm install vue-loader vue-template-compiler vue-style-loader css-loader webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

npm install vue --save

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const config ={
entry: {
app: './src/main.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname,'dist')
},
resolve:{
extensions: ['.js','.vue']
},
devServer: {
contentBase: './dist',
hot: true
},
module:{
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},    
    {
      test: /\.css/,
      loader: ['vue-style-loader','css-loader']
    }
    ]
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
inject: true,
hash: true
}),
]
};
module.exports = config;//千万千万别忘了这一行

 

一直提示can't resolve 'App',解决办法

在main.js里,import App from "./App";用相对路径就可以了。

环境搭建:

refer: https://www.jianshu.com/p/87b48e29773c

vue使用webapck的最基本最简单的开发环境配置的更多相关文章

  1. VUE开发--环境配置(一)(转)

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  2. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  3. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...

  4. windows系统下简单nodej.s环境配置 安装

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网 htt ...

  5. 一步步学Mybatis-搭建最简单的开发环境-开篇(1)

    最近抽空学习了Mybatis这个框架,在学习的过程中也找了很多的文章,个人感觉官网上的东西太多太杂,不适合许多希望一步步快速上手的朋友们,当然觉得查阅问题的时候可以直接通过官网找还比较快或者是Stac ...

  6. nodejs辅助前台开发系列(1) 搭建简单HTML开发环境

    搭建简单的html开发环境一般需要解决两个问题: 文本编辑器 WebServer集成 在文本编辑器选择上,VS Code 无疑是一匹黑马,谁用谁知道.WebServer集成nodejs对前端来说最为友 ...

  7. 《objective-c基础教程》学习笔记 (一)—— 开发环境配置和简单类型输出

    懒惰是富有最大的敌人,再不前进,我们就out了.最近工作比较轻松,不是很忙.于是想晚上下班回家学习点新东西.看着苹果大军的一天天壮大,心里也是痒痒的.于是就想先系统的学习下Objective-C,为之 ...

  8. windows系统下简单node.js环境配置 安装

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网 htt ...

  9. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

随机推荐

  1. WPF线程中获取控件的值和给控件赋值

    WPF中使用线程操作控件,按平常的操作方法操作的话会报异常:调用线程无法访问此对象,因为另一个线程拥有该对象.所以我们要使用Dispatcher类的BeginInvoke()与Invoke()方法.B ...

  2. Android配置AndroidAnnotations注解框架配置

    1在新建的普通项目里面,新建一个compile-libs文件夹,将下载来的androidannotation-xx.jar添加到compile-libs文件夹下,将androidannotation- ...

  3. 福州大学软件工程1916|W班 第5次作业成绩排名

    1. 作业链接: https://edu.cnblogs.com/campus/fzu/SoftwareEngineering1916W/homework/2768 2. 评分准则: 本次作业评分分为 ...

  4. git clone git@github.com:snuglove/ 报错

    [root@qc_centos7_5 ~]# git clone git@github.com:snuglove/Job-hunting-related.git Cloning into 'Job-h ...

  5. linux 命令 jps 和 goassess

    jps (Java Virtual Machine Process Status Tool)  是java提供的一个显示当前所有java进程pid的命令,适合在linux/unix平台上简单察看当前j ...

  6. 【JavaScript】对JS的封装

    以下方法封装了获取ID元素的JS代码,调用以下代码方法并传值,则可以直接获取id所指元素 function $id(x) { //此处x只是形参,代表传进来的:要获取元素的id字符串 return d ...

  7. 菜鸟初学redis(二)

    如果你的redis可以在myeclipse上运行小demo了,那么可以继续学习了 redis Java String 实例 string是redis最基本的类型,一个key对应一个value. str ...

  8. Conv1D、Conv2D、Conv3D

    由于计算机视觉的大红大紫,二维卷积的用处范围最广.因此本文首先介绍二维卷积,之后再介绍一维卷积与三维卷积的具体流程,并描述其各自的具体应用. 1. 二维卷积 图中的输入的数据维度为14×1414×14 ...

  9. 操作redis

    数据库分为: 1)传统的关系型数据库 mysql.oracle.sql server.sqllie.db2 id name passwd cratetime stu 特点: a 数据存在磁盘上 b 使 ...

  10. hadoop过程中遇到的错误与解决方法

    本文整理了在hadoop学习过程中遇到的各种问题. windows下开发环境搭建 大部分情况下,我们都是在windows下开发,hadoop则一般部署于linux服务器(无论是CDH还是原生hadoo ...