PS 阅读者需要node基础、webpack原理知识、vue基础

安装node 这个网上很多教程

打开终端

创建项目

npm init

全局安装：

cnpm i webpack webpack-dev-server -g

在项目里安装

cnpm i webpack  --save

定义项目的目录结构

创建一个app文件夹

在app文件夹创建index.html

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="./main.js"></script>
</body>
</html>

　在 app目录创建main.js

var greeter = require('./Getter.js');
document.getElementById('root').appendChild(greeter());

　在 app 目录创建Getter.js

module.exports = funtion() {
var greet = document.createElement('div');
greet.textContent ='学习 webpack'
return greet;
};

在项目的顶层创建webpack.config.js

module.exports = {
     devtool: 'eval-source-map', //配置生成Source Maps，选择合适的选项
     entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
　　　output: {
　　　　path: __dirname + "/dist", //打包后的文件存放的地方
　　　　filename: "[name].js" //打包后输出文件的文件名
　　　　},

}

　这时候本项目的终端运行 webpack 命令 就会出现一个main.js 这就实现了简单的打包

通过webpack2从0开始配置自己的vue项目 1的更多相关文章

  1. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  2. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  3. vue的学习--如何使用Intellij IDEA配置并运行vue项目

    重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...

  4. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  5. 使用IDEA工具配置和运行vue项目（详细其中的坑）

    刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代码,but but 就是没有文档什么的东西, 就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在 ...

  6. 「Vue」vue-cli 3.0集成sass/scss到vue项目

    vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Pleas ...

  7. 配置VSCode开发Vue项目

    一.安装VSCode.NodeJS VSCode:https://code.visualstudio.com/ NodeJS:https://nodejs.org/en/ 二.打开VSCode,安装常 ...

  8. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  9. vue项目配置及项目初识

    目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main. ...

随机推荐

  1. MySQL 基础--时间戳类型

    时间戳数据存储 .TimeStamp的取值范围为'1970-01-01 00:00:01' UTC 至'2038-01-19 03:14:07' UTC: .在存储时间戳数据时先将数据转换为UTC时区 ...

  2. 大比速：remoting、WCF(http)、WCF(tcp)、WCF(RESTful)、asp.net core(RESTful)

    近来在考虑一个服务选型,dotnet提供了众多的远程服务形式.在只考虑dotnet到dotnet的情形下,我们可以选择remoting.WCF(http).WCF(tcp).WCF(RESTful). ...

  3. Java字符串池（String Pool）深度解析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 在工作中,String类是我们使用频率非常高的一种对象类型.JVM为了提升性能和减少内存开销,避免字符串的重复创建,其维护了一块特殊的内存 ...

  4. 收藏的blog

    https://www.cnblogs.com/xifengxiaoma/tag/vue/ https://www.cnblogs.com/xifengxiaoma/p/9400200.html

  5. Calling Functions With Pointer Parameters

     参数类型是Constant Pointer 也就是 UnsafePointer<Type> 可以传入的类型: UnsafePointer<Type>/UnsafeMutab ...

  6. 故事描述SVM----支持向量机/support vector machine (SVM)

    作者:简之链接:https://www.zhihu.com/question/21094489/answer/86273196来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  7. JavaScript “跑马灯”抽奖活动代码解析与优化（一）

    最近的项目中做了一个"跑马灯"的抽奖特效插件.上篇文章已经分享过html和css 的相关知识.这篇文章主要分享一些 JavaScript 相关的知识.这几天在写这篇文章的时候,也顺 ...

  8. 全网最详细的实用的搜索工具Listary和Everything对比的区别【堪称比Everything要好】（图文详解）

    不多说,直接上干货! 引言 无论是工作还是科研,我们都希望工作既快又好,然而大多数时候却迷失在繁杂的重复劳动中,久久无法摆脱繁杂的事情.   你是不是曾有这样一种想法:如果我有哆啦A梦的口袋,只要拿出 ...

  9. Hibernate懒加载解析

    Hibernate懒加载解析 在Hibernate框架中,当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有限 ,为了减少并发量,减少系统资源的消耗,这时Hibernate用懒加载机制来 ...

  10. 从零开始学 Web 之 DOM（七）事件冒泡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...