安装，配置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 组件 ...
随机推荐
- iOS学习笔记（二）——Hello iOS
前面写了iOS开发环境搭建,只简单提了一下安装Xcode,这里再补充一下,点击下载Xcode的dmp文件,稍等片刻会有图一(拖拽Xcode至Applications)的提示,拖拽至Applicatio ...
- 前端基础------JS
JS中的语句要以分号 ; 为结束符. JS语言基础: 1, JS 的变量名可以使用 下划线, 数字, 字母, $ 组成. 不可以是数字开头 2, 声明变量使用var 变量名. 的格式来进行声明. v ...
- SQL获取某个时间字符串里的月和日，获取某天是周几
select datename(weekday,'2016-11-4') as '周' select convert(varchar,datepart(month,'2016-11-4')) as ' ...
- IDEA : Git Pull Failed 解决（IDEA中使用stash功能）
一.问题: 本地要commit代码,commit之前需pull代码,但pull提示冲突.如下 Git Pull Failed Your local changes would be overwritt ...
- Slyce,这家硅谷创业公司的来头你知道吗
Slyce,也许你没听过,一家硅谷创业公司,旨在帮助运动员和其他社会名流组织.优化社交媒体,过滤粉丝的声音,让明星更好的在社交媒体上和他们互动.但是如果如果说库里,那你应该就知道了,拿到了上届NBA总 ...
- TCP/IP/UDP 协议
互连网早期的时候,主机间的互连使用的是NCP协议.这种协议本身有很多缺陷,如:不能互连不同的主机,不能互连不同的操作系统,没有纠错功能.为了改善这种缺点,大牛弄出了TCP/IP协议.现在几乎所有的操作 ...
- PyQt4调用UI文件
方法1,转换到py调用 指令 pyuic4 test.ui -o testUi.py 方法2.直接调用ui文件 # -*- coding: utf-8 -*- """ - ...
- Django设置上传文件夹
django提供了两种字段类型models.FileField与models.ImageField,用于保存上传文件与图象.这两类字段提供了一个参数'upload_to',用于定义上传文件保存的路径( ...
- smarty模板及其应用
Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码逻辑分离. ...
- 服务熔断、降级、限流、异步RPC -- HyStrix
背景 伴随着业务复杂性的提高,系统的不断拆分,一个面向用户端的API,其内部的RPC调用层层嵌套,调用链条可能会非常长.这会造成以下几个问题: API接口可用性降低 引用Hystrix官方的一个例子, ...