安装，配置webpack.
1.下载node.js
2.在需要用到webpack的项目下打开命令窗口运行npm init生成package.js
3.安装webpack，使用npm install webpack --save-dev（在本目录中安装）
4.在本项目的目录下新建一个webpack.config .js(默认访问的是这个文件，如需更改需要配置，不过我暂时还不知道怎么配的)
5.在webpack.config .js中配置
var webpack = require('webpack');
module.exports = {
//页面入口文件配置
entry:'./js/index.jsx',
//入口文件输出配置
output:{
path:__dirname,//这个要放在一个绝对路径下
filename:'dite.js',
},
module:{
loaders:[
{test:/\.scss$/,loader:'style-loader!css-loader!sass-loader'},//这里需要下载style-loader css-loader sass-loader
{test :/\.jsx$/,loader:"babel-loader",query:{
presets:['react','es2015']
}}//babel可以将ES6转换为ES5 需要下载 babel-loader babel-presets-es2015 babel-presets-react
]
},
// module:{
// //加载器配置
// loaders:[
// {test:/\.css$/,loader:'style-loader!css-loader'},
// {test:/\.js$/,loader:'jsx-loader?sourceMap'},
// {test:/\.scss$/,loader:'style!css!sass!sourceMap'},
// {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}//limit=8192将小于8kb的图片转换为base64
// ]
// },
resolve:{
extensions:['.js','.json','.scss']
},
plugins:[
//去除代码块内的告警语句
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
//优先考虑使用最多的模块，并为它们分配最小的ID
//new webpack.optimize.OccurenceOrderPlugin()
]
}
6.需要新建入口引入的文件'./js/index.jsx',jsx的类容(里面有一些我学习react的代码);
require('../css/index.scss');
import React from 'react';//react的核心库
import ReactDOM from 'react-dom';//提供Dom的相关功能
import render from 'react';
var b = require('./main');
console.log(b.add(1,2)+"---获得b中的数据!!!");
console.log("aaa"+React);
var i = 1;
var myStyle = {
};
var NameStyle = {
fontSize:14,
color:'blue'
};
var LinkStyle = {
fontSize:18,
color:'orange'
}
var arr = [
'<h1>123</h1>',
'<h1>234</h1>'
];
var HelloWorld = React.createClass({
render:function(){
return(
<div>
<Name name = {this.props.name}/>
<Link site = {this.props.site}/>
</div>
);
}
});
var Name = React.createClass({
render:function(){
return (<h1 style={NameStyle}>{this.props.name}</h1>);
}
});
var Link = React.createClass({
render:function(){
return (
<div>
<p>{this.props.site}</p>
<a href={this.props.site}>{this.props.site}</a>
</div>
);
}
});
var LikeButton = React.createClass({
getInitialState:function(){
return {liked:false};
},
handleClick:function(event){
this.setState({liked:!this.state.liked});
},
render:function(){
var text =this.state.liked?'喜欢':'不喜欢';
return(
<p onClick={this.handleClick}>
你{text}我,点我切换状态;
</p>
);
}
})
ReactDOM.render(
<h1 style = {myStyle}>
{/*first info*/}
Hello,world!
{1+2}{i==1?'true':'false'}
{arr}
<HelloWorld name = 'yeam' site="http://www.runoob.com"/>
<LikeButton/>
</h1>,
document.getElementById('setInfo')
)
7.html页面中的信息
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New React App</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="setInfo">
</div>
<script src="dite.js"></script>
</body>
</html>
8.package.js中的相应信息
{
"name": "hello",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --port 3000"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"browser-sync": "^2.18.7",
"css-loader": "^0.26.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^3.0.2",
"gulp-concat": "^2.6.1",
"gulp-minify-css": "^1.2.4",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^2.0.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"runoob-react-test": "file:React",
"sass-loader": "^6.0.2",
"style-loader": "^0.13.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"description": ""
}
9.发布服务需要安装 npm install webpack-config-server --save-dev
10.在浏览器中运行 localhost:3000(端口号3000是在package中修改的，如果没有设置默认是8080)
安装，配置webpack.的更多相关文章
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）
跟着Webpack傻瓜式指南(一)这个教程在安装webpack和webpack-dev-server的时候遇到很多问题,查了很多终于一一找到解决办法. 主要参考了这三篇博文: moudule.js:3 ...
- webpack和webpack-dev-server安装配置
本文转载自:https://www.cnblogs.com/xuehaoyue/p/6410095.html 跟着Webpack傻瓜式指南(一)这个教程在安装webpack和webpack-dev-s ...
- Webpack安装配置及打包详细过程
引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...
- webpack安装大于4.x版本(没有配置webpack.config.js)
webpack安装大于4.x版本(没有配置webpack.config.js) webpack 输出参数-o 高版本 如果安装的webpack版本大于4+,还需要安装webpack-cli.在没有配 ...
- webpack安装低于4版本(没有配置webpack.config.js)
webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本 1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...
- 第四十七篇：webpack的基本使用(一) --安装和配置webpack
好家伙, 1.webpack的基本使用 写个例子:实现一个奇偶行变色列表 步骤如下: ① 新建项目空白目录,并运行 npm init-y命令,初始化包管理配置文件 package.json② 新建sr ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- Gulp的安装配置过程和一些小坑
谈谈gulp. 项目尾声,老师叫我去熟悉一下grunt前端自动化工具,第一次知道这种东西,我就查各种资料啊,发现grunt已经‘过时’了,大家都用gulp和webpack.我当然选择了配置最简单的gu ...
- 笔记：配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
随机推荐
- MongoDB实践-自定义ASP.NET Session Store
Session由来 由于HTTP协议是无状态的,客户端与服务器端进行“请求-响应”操作后,建立的连接就释放了,服务器端根本不知道刚才是哪个客户端访问的.但是有些场景是需要知道客户端的状态的,最典型的就 ...
- 问题：Unable to find a 'userdata.img' file for ABI armeabi to copy into the AVD folder.
创建AVD时,发现创建不成功,报错“Unable to find a 'userdata.img' file for ABIarmeabi to copy into the AVD folder.” ...
- PHP-Heredoc用法:<<<EOFEOF;
Heredoc,用来输出大段的HTML和JavaScript <<<EOF后面不能有空格. EOF;末尾的结束符必须靠边,并且前面不能有空格和缩进符. 例如: $mazey=< ...
- Centos之目录处理命令（七）
linux中 关于目录 有几个重要概念 一个是 / 根目录 还有一个当前用户的家目录 比如 root用户的家目录是 /root 普通用户的家目录是/home/xxx 下 root登录 默认家目录 ...
- JavaWeb 之文件下载
1. 下载概述 下载就是向客户端响应字节数据! 将一个文件变成字节数组, 使用 response.getOutputStream() 来响应给浏览器!! 2. 下载要求 两个头一个流 Content- ...
- HDFS涉及ACLs的命令
What is ACL Hadoop中的ACL与Linux中的ACL机制基本相同,都是用于为文件系统提供更精细化的权限控制. 参考 HDFS ACLs: Fine-Grained Permission ...
- Python定时执行脚本
最近测试hbase,老发现服务挂掉,自己不能及时发现,想了想,写了个脚本,让脚本每个小时执行一次,以便检测是否有服务挂掉,如果有服务挂掉,及时启动 import os import datetime ...
- ubuntu 安装Nodejs
ubuntu 安装Nodejs 1.在软件管理器里面安装nodejs2.由于版本很老,所以需要更新版本:先安装npm , sudo apt install npm然后用npm安装 n 命令,更新nod ...
- T-SQL怎样提高数据库性能
总结: 1.书写问题 2.表连接方式 3.索引的抉择 4.执行计划之参数嗅探 5.子查询与表连接的效率 6.临时表.CTE.表变量的选择 7.常用sp与select的缓存命中 8.锁(善用nolock ...
- Scrapy框架2
一.进程.线程.协成 1.进程.线程.协成之间的关系 1. 线程是计算机中最小的工作单元. 2. 进程是提供资源供n个线程使用,即进程是最小的管理单元. ...