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. Mac 下 软件安装路径查看 命令： Which， 估计Linux 也是

    ✘ marikobayashi@juk  ~  which git /usr/bin/git marikobayashi@juk  ~  which maven maven not found ...

  2. 突然 不能f**q

    ss 突然访问不了,于是去查看ip是否被f,发现国outer 国inner 都通,不知道什么情况,后来把 系统代理模式 改为全局,发觉可以,又把他改为 pac模式,正常了.           记录一 ...

  3. Android 经验之文件下载

    在Android 开发中,我们肯定会接触到下载需求,那么如何通过技术实现呢? 一.简单实现: 通过了解HTTP原理,我们应该可以知道,HTTP学习的时候,可以通过HTTPGET方式来进行文件下载: n ...

  4. 仿B站项目——(1)计划，前端工程

    计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...

  5. [git] 基本原理

    1. 基本原理 工作目录:本地项目所在目录    暂存区: 被 git 所管理的文件 本地仓库:本地的版本仓库,一般的提交操作会将变更信息先提交到本地仓库的版本库中 远程仓库:远程的版本仓库,将变更信 ...

  6. python中匿名函数lambda

    简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命 名一个函数的场合下使用,也就是指匿名函数. 先看它的几个用法: map( lambda x: x*x, [y f ...

  7. 【2019北京集训测试赛（十三）】数据(sj) 冷静分析

    题目大意:给你一个代表区间$[1,n]$的线段树,问你随机访问区间$[1,n]$中的一个子区间,覆盖到的线段树节点个数的期望(需要乘上$\frac{n(n-1)}{2}$后输出). 数据范围:$n≤1 ...

  8. js设计模式小结

    1 构造函数模式 var Person = function(name){ this.name = name; this.getName = function(){ console.log(this. ...

  9. [源码]Dephi溢出demo( Shellcode for XP)

    [源码]Dephi溢出demo( Shellcode for XP) unit Unit1; interface uses Windows, Messages, SysUtils, Variants, ...

  10. vi/vim编辑器的使用

    命令模式下操作替换字符:%s/str1/str2/g删除全部内容:%d不保存退出:q!保存退出:wq! 执行shell命令:!command       如!ls -l 在下一行插入shell命令执行 ...