安装，配置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 组件 ...
随机推荐
- COGS 693. [SDOI2005]Antiprime数 唯一分解定理逆用
693. Antiprime数 ★★ 输入文件:antip.in 输出文件:antip.out 简单对比 时间限制:1 s 内存限制:128 MB 如果一个自然数n(n>=1), ...
- 《从零开始学Swift》学习笔记（Day 13）——数据类型之整型和浮点型
Swift 2.0学习笔记(Day 13)——数据类型之整型和浮点型 原创文章,欢迎转载.转载请注明:关东升的博客 Swift提供8.16.32.64位形式的有符号及无符号整数.这些整数类型遵循 ...
- Flow Problem(最大流模板)
Flow Problem Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tota ...
- <2013 08 26> 雅思听力相关
近两日开始接触雅思题型,初步做了6套剑桥雅思题的听力部分,完成情况还可以,这里做个总结. 1.听力总共约40左右道题目,30min左右完成,结束后有十分钟把答案写到答题卷上.所有听力材料都只播放一遍! ...
- 任务05—学习 MARKDOWN 语言
我的简历地址: https://github.com/jinxiaohang/MyResume/blob/master/ForJavaJob.md 本任务主要目的掌握markdown. 1.首先是工具 ...
- Redis慢查询，redis-cli，redis-benchmark，info
一.慢查询: 1.慢查询的作用:通过慢查询分析,找到有问题的命令进行优化. 2.慢查询的redis的配置参数: slowlog-log-slower-than 慢查询预设阈值(单位是微秒1秒=1000 ...
- substring splice
返回start到end之前 不包括end stringObject.substring(start,end) (不接受负数) stringObject.slice(start,end) start起始 ...
- Django 项目补充知识（JSONP,前端瀑布流布局，组合搜索，多级评论）
一.JSONP 1浏览器同源策略 通过Ajax,如果在当前域名去访问其他域名时,浏览器会出现同源策略,从而阻止请求的返回 由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一 ...
- 运维角度浅谈MySQL数据库优化
一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善.这篇博文主要谈MySQL数据库发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大致分 ...
- java 分页工具类
//13年写的,今天(17)拷贝到博客园 package com.sicdt.sicsign.web.utils; import java.io.Serializable; import java.u ...