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

安装node 这个网上很多教程

打开终端

创建项目

  1. npm init

全局安装：

  1. cnpm i webpack webpack-dev-server -g

在项目里安装

  1. cnpm i webpack  --save

定义项目的目录结构

创建一个app文件夹

在app文件夹创建index.html

  1. //index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Webpack Sample Project</title>
  7. </head>
  8. <body>
  9. <div id='root'>
  10. </div>
  11. <script src="./main.js"></script>
  12. </body>
  13. </html>

　在 app目录创建main.js

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

　在 app 目录创建Getter.js

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

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

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

　这时候本项目的终端运行 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. ZZ：git只clone仓库中指定子目录和指定文件的实现

    原文链接: http://blog.csdn.net/xuyaqun/article/details/49275477 git目前唯一不能实现的是:不能像svn那样,针对子目录设置权限,这与git分布 ...

  2. 精选！15个必备的VSCode插件

    Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市 ...

  3. nova scheduler filters 配置

    scheduler_driver = nova.scheduler.filter_scheduler.FilterScheduler scheduler_default_filters = Avail ...

  4. iOS 不能加载电子签名

    问题: 1:使用WKWebView在iOS12.0以上的系统中,可以显示PDF中的电子图章,签名.在iOS12.0以下的系统中不能显示电子签名,图章. 2:  解决方案,使用PDF.js加载. pdf ...

  5. cad.net 利用win32api实现不重复打开dwg路径的文件夹(资源管理器)

    这里地址的方法也是可用的,但是net3.5不能使用 为此我选择使用win32api的方式来遍历当前桌面所有资源管理器 /// <summary> /// 不重复打开dwg路径的资源管理器 ...

  6. Network - SSL/TLS的基本概念

    对称加密与非对称加密 加密---明文变成密文:解密---密文变为明文.在这两个过程中,都需要密钥. 对称密钥加密(共享密钥) 指的是双方共同拥有使用完全相同的单个key, 这种Key既用于加密,也用于 ...

  7. GMM基础

    一.单成分单变量高斯模型 二.单成分多变量高斯模型 若协方差矩阵为对角矩阵且对角线上值相等,两变量高斯分布的等值线为圆形. 若协方差矩阵为对角矩阵且对角线上值不等,两变量高斯分布的等值线为椭圆形, 长 ...

  8. javascript编程中this解析

    一.为什么要使用this? this 提供了一种更优雅的方式来隐式"传递"一个对象引用,因此可以将 API 设计得更加简洁并且易于复用.随着你的使用模式越来越复杂,显式传递上下文对 ...

  9. docker 容器时间和系统时间不一致

    docker cp /etc/localtime 容器名:/etc/localtime cp /etc/localtime 24fe94504424:/etc/localtime date -s 09 ...

  10. c++11并行、并发与多线程编程

    首先,我们先理解并发和并行的区别. 你吃饭吃到一半,电话来了,你一直到吃完了以后才去接,这就说明你不支持并发也不支持并行. 你吃饭吃到一半,电话来了,你停了下来接了电话,接完后继续吃饭,这说明你支持并 ...