安装，配置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 组件 ...
随机推荐
- caffe小问题汇总（持续更新）
PS:所有问题均在caffe-windows下产生 1.为什么AlexNet中,InnerProduct_Layer(fc8)层的输出可以直接作为Accuracy_Layer层的输出? 答:首先,我们 ...
- iOS响应超出View范围点击事件
// 在view中重写以下方法,其中self.button就是那个希望被触发点击事件的按钮 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent ...
- python问号堂--第二篇
1.分别书写数字5,10,32,7的二进制表示? 5---0b101 10---0b1010 32---0b100000 7---0b111 以上结果可以bin()来检测 2. ...
- VS2015 如何打印出 类的内存布局?
项目->属性->C/C++->命令行 添加如下内容: /d1 reportAllClassLayout [XXX] XXX 可选,代表源文件名,例如 main.cpp 或 /d1 r ...
- python中os模块函数方法详解最全最新
os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 import os print(os.getcwd()) os.chdir("dirname") 改 ...
- （4.13）SQL Server profile使用、数据库优化引擎顾问使用
SQL Server profile使用技巧 介绍 经常会有人问profile工具该怎么使用?有没有方法获取性能差的sql的问题.自从转mysql我自己也差不多2年没有使用profile,忽然prof ...
- Vue-router2.0学习笔记(转)
转:https://segmentfault.com/a/1190000007825106 Vue.js的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-rou ...
- Java中的异常和处理详解（转发：https://www.cnblogs.com/lulipro/p/7504267.html）
简介 程序运行时,发生的不被期望的事件,它阻止了程序按照程序员的预期正常执行,这就是异常.异常发生时,是任程序自生自灭,立刻退出终止,还是输出错误给用户?或者用C语言风格:用函数返回值作为执行状态?. ...
- spark学习（2）--hadoop安装、配置
环境: 三台机器 ubuntu14.04 hadoop2.7.5 jdk-8u161-linux-x64.tar.gz (jdk1.8) 架构: machine101 :名称节点.数据节点.Secon ...
- PHP 实现Session入库/存入redis
对于大访问量的站点使用默认的Session 并不合适,我们可以将其存入数据库.或者使用Redis KEY-VALUE数据存储方案 首先新建一个session表 CREATE TABLE `sessio ...