前提： 已经安装nodejs和npm

#全局安装webpack 自动构建化工具，职能管理项目；webpack-dev-server是开发工具，提供 Hot Module Replacement 功能
# webpack 介绍：http://webpack.github.io/docs/what-is-webpack.html

  1. npm install -g webpack webpack-dev-server

#在项目文件夹路径下，初始化npm项目

  1. npm init

#安装webpack和webpack-dev-server到项目中

  1. npm install webpack webpack-dev-server --save-dev

#可选：
#安装css-loader、 style-loader、 image-loader,可以在js下加载css样式文件和图片（可选）

（webpack还可以安装其他功能，如code-splitting等）

  1. npm install css-loader style-loader image-loader --save

#安装reactJs依赖包（react react-dom）和babel依赖包（转换jsx-js等）

  1. npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core

#新建webpack.config.js到根目录下,添加以下内容(loader可选)：

  1. module.exports = {
  2. entry: "./index.js",
  3. output: {
  4. path: __dirname,
  5. filename: "bundle.js"
  6. },
  7. module: {
  8. loaders: [
  9. {
  10. test: /\.js[x]?$/,
  11. exclude: /node_modules/,
  12. loader: 'babel-loader?presets[]=es2015&presets[]=react',
  13. }, {
  14. test: /\.css$/,
  15. loader: 'style-loader!css-loader'
  16. },{ test: /\.(png|jpg)$/,
  17. loader: 'url-loader?limit=8192'
  18. }
  19. ]
  20. }
  21. };

#在package.json下添加脚本

  1. "scripts": {
  2. "test": "echo \"Error: no test specified\" && exit 1",
  3. "build": "webpack",
  4. "start": "webpack-dev-server --devtool eval --progress --colors --hot",
  5. "deploy": "NODE_ENV=production webpack -p",
  6. "deploy-windows": "SET NODE_ENV=production & webpack -p ",
  7. "validate": "npm ls"
  8. }

#添加各个文件到根目录下
---index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. ReactDOM.render(<h1>我的世界</h1>,document.querySelector('#container'));

--index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>index</title>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8. </head>
  9.  
  10. <body>
  11.     <div id="container">
  12.  
  13.     </div>
  14.     <script type="text/javascript" src="bundle.js"></script>
  15. </body>
  16.  
  17. </html>

#运行后打开http://127.0.0.1:8080/ 即可以

  1. npm start

D1.1.利用npm（webpack）构建基本reactJS项目的更多相关文章

  1. webpack(构建一个前端项目)详解--升级

    升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...

  2. 用webpack构建一个常规项目,好处和坏处分析

    最近项目改版,用webpack重新架构. 些许心得我会写几篇记录一下. 好处如下: 1.ES6语法用起来,babel-loader转义,各种新语法用起来. 2.import 语法写起来,webpack ...

  3. webpack工具学习 构建简单vue项目（不依赖vue-cli） webpack4.0

    目的用webpack构建简单前端项目 1.npm init   (npm init -y)  形成package.json 2.npm install --save-dev webpack  形成 n ...

  4. Maven(3)-利用intellij idea创建maven web项目

    本文通过一个例子来介绍利用maven来构建一个web项目.开发工具:intellij idea. 一.新建maven项目 此处选择:Create from archetype.表示从已有的maven模 ...

  5. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  6. 提高 webpack 构建 Vue 项目的速度

    前言 最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大, ...

  7. 利用npm安装/删除/发布/更新/撤销发布包 --社会我npm哥，好用话不多

      一.什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率   1.从社区的角度:把针对某一特定 ...

  8. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

  9. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

随机推荐

  1. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  2. maven 使用tomcat插件 自动化部署war

    1.相关环境变量 idea tomcat8 maven3 2.增加tomcat user, 修改 $CATALINA_HOME/conf/tomcat-users.xml <tomcat-use ...

  3. jQuery.is() 函数

    is() 函数 判断当前对象是否符合指定表达式 语法 $selector.is(表达式)//指定表达式 返回值 返回值为布尔型(true/false) 当当前对象包含多个元素时,只要任意元素满足指定表 ...

  4. 转：ProgressMonitorDialog

    http://stackoverflow.com/questions/12986912/using-progressmonitordialog-in-eclipse-4-properly public ...

  5. 如何将本地文件上传到github托管

    Github开源代码库以及版本控制系统,可以托管各种git库,可以将个人Blog或小型项目托管到github,方便看起来又高大上的样子,哈哈哈,下面就看一下实践过程和成果吧!一:注册账号:地址: ([ ...

  6. adb push命令的使用

    最近刚接触一种工具(命令),什么命令呢?就是adb命令,对这个命令纯属一个小白鼠,什么都不懂,所以只能adb --help 一下参数,然后就尝试着使用. 今天遇到一个问题,需要将某个文件拷到小机上面, ...

  7. 配置项setOption -- title

    标题组件,包含主标题和副标题.在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用. title.show boolean [ de ...

  8. Access使用join进行多个表联合查询的问题

    Access是支持三表或三表以上的join查询的,但是要加括号,如果不加的话,会报错,括号的作用是决定join的顺序.例如: SELECT *FROM (aa LEFT JOIN bb ON aa.a ...

  9. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  10. linux上使用shell脚本查看内存使用率

    如上的内存利用率 = [-/+buffers/cache:used]/[Mem:total ] =  6293404 / 16333656 对于free命令而言,有如下公式: total = used ...