安装，配置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 组件 ...
随机推荐
- confluence数据备份
上篇文章总结了confluence的docker-compose的搭建,但是考虑到数据安全性问题,需要最数据库进行备份 因为mysql的data目录已经挂载到宿主机,所以直接对mysql容器的宿主机进 ...
- 【转】NPOI自定义单元格背景颜色
经常在NPOI群里聊天时发现有人在问NPOI设置单元格背景颜色的问题,而Tony Qu大神的博客里没有相关教程,刚好最近在做项目时研究了一下这一块,在这里总结一下. 在NPOI中默认的颜色类是HSSF ...
- width: 50%; display:inline-flex;
<style lang="less"> @import "../style/weui.wxss"; @wx-width: 750rpx; @wx ...
- c#调用c++带有回调函数方法的实现
最近完成了一个C++版本的对外sdk程序,其中有部分回调函数使用. C++程序使用时没有异常,但是在C#环境下使用时出了点问题,简单总结下. 感谢博客:http://blog.csdn.net/son ...
- Vue.js中css的作用域
Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...
- [NOIP2018TG]旅行
[NOIP2018TG]旅行 树很简单,对每个点sort儿子,贪心走就行了 基环树呢? 如果是1e5可能不太好做 但是5000的话枚举断边就可以\(n^2\)了 #include<bits/st ...
- ubuntu下MySQL无法启动Couldn't find MySQL server (/usr/bin/mysqld_safe)”
一台虚拟测试机,启动的时候,报上述错误,从这个报错来看,多半是因为读取到了另外的my.cnf导致的 那么,my.cnf放置在什么地方? 可以通过如下指令获取到 root@mysql:~# mysqld ...
- random生成六位随机数验证码
需求: 生成一个六位随机验证码 # 傻瓜式纯数字实现import randomran = random.randint(100000, 999999) # ran = random.randrange ...
- LATEX教程（一）
第一个文档 打开WinEdt,建立一个新文档,将以下内容复制进入文档中,保存,保存类型选择为UTF-8. \documentclass{article} \begin{document} hello, ...
- JavaWeb—过滤器Filter
1.Filter简介 Filter称之为过滤器,是用来做一些拦截的任务.比如客户端请求服务器的某个资源时(可以是Servlet.JSP.HTML等等),我们可以拦截.当服务器返回资源给客户端的时候,我 ...