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

首先,安装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. redis.windows.conf各项配置参数介绍 (九)

    # 默认情况下,redis不是在后台模式运行的,如果需要在后台进程运行,把该项的值更改为yes,默认为no daemonize:是否以后台daemon方式运行 # 如redis服务以后台进程运行的时候 ...

  2. highcharts图表史上最全的参数配置(属性+事件)

    今天这里将给大家全全展现相关的参数配置: chart.events.addSeries:添加数列到图表中. chart.events.click:整个图表的绘图区上所发生的点击事件. chart.ev ...

  3. SQL命令查看Mysql数据库大小

    SQL命令查看Mysql数据库大小的方法. 要想知道每个数据库的大小的话,步骤如下:1.进入information_schema 数据库(存放了其他的数据库的信息)use information_sc ...

  4. JQM事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  5. CentOS 7.0 关闭firewalld防火墙指令 及更换Iptables防火墙

    CentOS 7.0 关闭firewalld防火墙指令 及更换Iptables防火墙 时间:2014-10-13 19:03:48  作者:哎丫丫  来源:哎丫丫数码网  查看:11761  评论:2 ...

  6. filebeat+kafka失败

    filebeat端配置 #----------------------------- Kafka output -------------------------------- output.kafk ...

  7. STM32CubeMX软件工程描述_USART配置过程

    推荐 分享一个朋友的人工智能教程,零基础!通俗易懂!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前面 学习本文之前可以查 ...

  8. Netty系列之Netty百万级推送服务设计要点(转)

    1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...

  9. 使用info命令查看Redis信息和状态

    redis-cli连接服务器后,使用info命令查看Redis信息和状态: ? 1 info 其中memory段显示了redis的内存使用状态. 以下内容复制自:http://redisdoc.com ...

  10. 回文树(回文自动机) - BZOJ 3676 回文串

    BZOJ 3676 回文串 Problem's Link: http://www.lydsy.com/JudgeOnline/problem.php?id=3676 Mean: 略 analyse: ...