这里再配置的时候走了些弯路,现在,把配置前的准备工作做好很重要:

首先,安装node.js,当然,npm也就有了;

其次,安装xampp,主要是为了配置Apache;

安装好后,xampp---htdocs文件夹下创建项目就好了。

好,开始步入正题:

当然最好先看下我给的参考地址,

参考:http://www.jianshu.com/p/42e11515c10f

然后在接着这个内容会比较好;

这里我主要是记录的是自己配置过程中遇到的问题:

当时这里没看懂,后来,理解了以后,是这样操作的:

结构中我们是没有看到bundle.js这个脚本的,这是在运行了webpack以后才会生成的。

还有,在配置package.json的时候,注意别写错了。

当然,现在暂时先配置到了npm start,后续再补充。

项目结构图:

app文件夹:用来存放原始数据和我们将写的JavaScript模块;

Greeter.js只包括一个用来返回包含问候信息的html元素的函数。

main.js用来把Greeter模块返回的节点插入页面。

public文件夹:用来存放准备给浏览器读取的数据(包括使用webpack生成的打包后的js文件以及一个index.html文件)

index.html文件只有最基础的html代码,它唯一的目的就是加载打包后的js文件(bundle.js)

参考:http://www.jianshu.com/p/42e11515c10f

webpack配置(一)的更多相关文章

  1. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  2. webpack配置详解

    webpack配置详解 先点个赞吧,再挨个点下面的连接,觉得不值这个赞的回来骂我啊. Webpack傻瓜式指南(一) Webpack傻瓜指南(二)开发和部署技巧 Webpack傻瓜式指南 原生的官网详 ...

  3. Webpack配置示例和详细说明

    /* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...

  4. vue-cli#2.0 webpack 配置分析

    目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...

  5. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  6. webpack配置报错:invalid configuration object.webpack has been initialisted using a configuration objcet that does not match thie API schema

    最近接收了别人的项目,webpack配置总是报错如下:最后找到了解决办法,在此分享一下: 错误情况: 解决办法: 将package.json里面的colors删除掉即可

  7. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  8. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  9. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  10. storybook配置之基本配置和webpack配置

    默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...

随机推荐

  1. C++求两个数的最大值

    //不使用if,:?等推断语句.求两个数字中最大的那个数字. #include<iostream> using namespace std; int main() { int a = -1 ...

  2. ItelliJ基于Gradle创建及发布Web项目(一)

    背景:安装IntelliJ,去官网下载. 创建WEB项目 1. File->New Project,在弹出的选项框中勾选Web,如下图. IntelliJ默认使用Gradle,感谢Gradle. ...

  3. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  4. Atitit.软件仪表盘(7)--温度监测子系统--电脑重要部件温度与监控and警报

    Atitit.软件仪表盘(7)--温度监测子系统--电脑重要部件温度与监控and警报 Cpu温度,风扇转速 主板温度 显卡温度 硬盘温度 电池温度 鲁大师  硬盘温度 Cpu温度  core temp ...

  5. CGROUP相关知识

    安装 CentOS 6 yum install libcgroup CentOS 7 yum install libcgroup-tools 使用 默认情况下有几个控制器可以进行限制,分别是 cpus ...

  6. 为什么很多大公司继续使用 Objective-C,不用 Swift

    为什么很多大公司继续使用 Objective-C,不用 Swift   我觉得这个问题最核心的原因就一点:历史包袱. 猿题库算是比较新兴的应用了,代码量级也是 10 万的级别.很多稍微有些年头的应用, ...

  7. linux之backtrace

    backtrace用于打印函数调用堆栈 /******************************************************************************* ...

  8. 使用Crypto++库的CBC模式实现加密(二)

    前面已经有一篇介绍使用Crypto++库实现的加密的文章了,但是代码中考虑的不完全,所以就重新发了个二 C++封装: #include "zyaes.h" #include < ...

  9. headfirst设计模式swift版01

    headfirst设计模式这本书真好,准备用一个月学完.书里讲得很清楚了. 设计原则: 1.找出应用中可能需要变化之处,把它们独立出来,不要和那些不需要变化的代码混在一起. 2.针对接口编程,而不是针 ...

  10. strerror和perror函数详解

    /*#include <string.h> char *strerror(int errnum); 它返回errnum的值所对应的错误提示信息,例如errnum等于12的话,它就会返回&q ...