D1.1.利用npm（webpack）构建基本reactJS项目
前提： 已经安装nodejs和npm
#全局安装webpack 自动构建化工具，职能管理项目；webpack-dev-server是开发工具，提供 Hot Module Replacement 功能
# webpack 介绍：http://webpack.github.io/docs/what-is-webpack.html
npm install -g webpack webpack-dev-server
#在项目文件夹路径下，初始化npm项目
npm init
#安装webpack和webpack-dev-server到项目中
npm install webpack webpack-dev-server --save-dev
#可选：
#安装css-loader、 style-loader、 image-loader,可以在js下加载css样式文件和图片（可选）
（webpack还可以安装其他功能，如code-splitting等）
npm install css-loader style-loader image-loader --save
#安装reactJs依赖包（react react-dom）和babel依赖包（转换jsx-js等）
npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core
#新建webpack.config.js到根目录下,添加以下内容(loader可选)：
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
},{ test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}
]
}
};
#在package.json下添加脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --devtool eval --progress --colors --hot",
"deploy": "NODE_ENV=production webpack -p",
"deploy-windows": "SET NODE_ENV=production & webpack -p ",
"validate": "npm ls"
}
#添加各个文件到根目录下
---index.js
import React from 'react';
import ReactDOM from 'react-dom'; ReactDOM.render(<h1>我的世界</h1>,document.querySelector('#container'));
--index.html
<!DOCTYPE html>
<html lang="en"> <head>
<title>index</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> <body>
<div id="container"> </div>
<script type="text/javascript" src="bundle.js"></script>
</body> </html>
#运行后打开http://127.0.0.1:8080/ 即可以
npm start
D1.1.利用npm（webpack）构建基本reactJS项目的更多相关文章
- webpack(构建一个前端项目)详解--升级
升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...
- 用webpack构建一个常规项目,好处和坏处分析
最近项目改版,用webpack重新架构. 些许心得我会写几篇记录一下. 好处如下: 1.ES6语法用起来,babel-loader转义,各种新语法用起来. 2.import 语法写起来,webpack ...
- webpack工具学习 构建简单vue项目（不依赖vue-cli） webpack4.0
目的用webpack构建简单前端项目 1.npm init (npm init -y) 形成package.json 2.npm install --save-dev webpack 形成 n ...
- Maven(3)-利用intellij idea创建maven web项目
本文通过一个例子来介绍利用maven来构建一个web项目.开发工具:intellij idea. 一.新建maven项目 此处选择:Create from archetype.表示从已有的maven模 ...
- 利用webpack构建vue项目
快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...
- 提高 webpack 构建 Vue 项目的速度
前言 最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大, ...
- 利用npm安装/删除/发布/更新/撤销发布包 --社会我npm哥，好用话不多
一.什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率 1.从社区的角度:把针对某一特定 ...
- 利用 vue-cli 构建一个 Vue 项目
一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...
- (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...
随机推荐
- web前端之HTML中元素的区分
作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素.在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解: 目前博主总结了三种分类方法:一是按封闭来划分,一是按显 ...
- 名词王国里的死刑execution in the kingdom of nouns
http://www.cnblogs.com/bigfish--/archive/2011/12/31/2308407.htmlhttp://justjavac.com/java/2012/07/23 ...
- s5pv210 cpu运行debian
1.环境准备 sudo apt-get install binfmt-support qemu qemu-user-static debootstrap 2.获取debian根文件系统 2.1.cd ...
- Cocos2d-x 核心概念 - 坐标系(UI.OpenGL.世界坐标系.模型坐标系)
UI坐标系与OpenGL坐标系 UI坐标就是Android和IOS等应用开发时候使用的二维坐标系,原点在左上角 OpenGL坐标是三维坐标,由于Cocos2d-x Lua 底层采用OpenGL渲染,因 ...
- MAC 设置环境变量path的几种方法
mac 一般使用bash作为默认shell Mac系统的环境变量,加载顺序为:/etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.prof ...
- C#利用服务器实现客户端之间通信
这两天在学习C#,C#高级编程真的是厚厚的一本书QAQ. 昨天看了一下里面的通信部分(其实还没怎么看),看了网上一些人的博客,自己在他们的博客基础上写了一个通信. 先来讲述下我自己对于整个Socket ...
- Nodejs的安装及配置
1.从Nodejs官网下载安装包,进行安装,是否安装成功,可以从cmd npm去检查,出现如下界面,就表示安装成功 2.打开Webstorm进行配置,(如果安装前打开webstorm了,需要重启web ...
- 程序设计入门——C语言 第6周编程练习 1 分解质因数（5分）
1 分解质因数(5分) 题目内容: 每个非素数(合数)都可以写成几个素数(也可称为质数)相乘的形式,这几个素数就都叫做这个合数的质因数.比如,6可以被分解为2x3,而24可以被分解为2x2x2x3. ...
- hadoop启动是常见小问题
1.先su进入root账户,然后 service iptables stop //关闭防火墙 start-all.sh //启动 2.启动是会显示,如果出错日志保存路径!!!基本所有问题都要去这些日志 ...
- RabbitMQ之入门
生成者: #coding:utf-8 import sys import pika credentials=pika.PlainCredentials("guest"," ...