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. Bashu2445 -- 【网络流24题-10】餐巾问题

    2445 -- [网络流24题-10]餐巾问题 Description 一个餐厅在相继的n天里,每天需要用的餐巾数不尽相同.假设第i天需要ri块餐巾(i=1,2,…,n).餐厅可以购买新的餐巾,每块餐 ...

  2. poj1149构图题

     引题解: 这道题目的大意是这样的:⦁ 有 M 个猪圈(M ≤ 1000),每个猪圈里初始时有若干头猪.⦁ 一开始所有猪圈都是关闭的.⦁ 依次来了 N 个顾客(N ≤ 100),每个顾客分别会打开指定 ...

  3. Tools - UML

    ProcessOn - 在线绘图工具 ProcessOn 支持流程图.思维导图.原型图.UML.网络拓扑图等: 主流的UML图列都支持,可以作为方便快捷的UML工具: PlantUML - 多系统多编 ...

  4. Spring Boot功能实战

    添加web功能启动器 添加了Spring Boot基础依赖后,如要使用web mvc功能,只需要添加如下启动器即可,Spring Boot会自动装配web功能. <dependencies> ...

  5. live-server 快速搭建服务

    原因: 在2018年3月2日偶然情况下听到一个大佬提起“live-server”这东西, 我就研究一下,用过的人才知道live-server多么方便... 功能: 当启动live-server服务的文 ...

  6. golang中GOPATH的简单理解

    1.为什么要配置GOPATH 配置GOPATH的用意是为了方便项目的部署和构建,以及可以直接使用go get 命令下载第三方的包到自己的项目的src下和相关的执行文件bin目录,和中间文件pkg sr ...

  7. Xamarin.Android 获取手机IP地址

    命名空间: using System.Net; 代码: IPAddress[] address = Dns.GetHostAddresses(Dns.GetHostName()); ] != null ...

  8. ThreadLocal父子线程传递实现方案

    介绍InheritableThreadLocal之前,假设对 ThreadLocal 已经有了一定的理解,比如基本概念,原理,如果没有,可以参考:ThreadLocal源码分析解密.在讲解之前我们先列 ...

  9. Linux学习笔记之八————vim编辑器常用命令总结

    <1>从命令行模式到插入模式 i  :在光标前插入 a :在光标后插入 I  :在光标所处在的行的行首 A :在光标所处在的行的末尾 o  :在光标所处在的行的下一行 行首 O :在光标所 ...

  10. Spring杂记BeanFactory之getBean方法

    1.(BeanFactory) getBean(beanName) 2.(AbstractBeanFactory) doGetBean 3.(AbstractBeanFactory) transfor ...