웹 팩 2+React 인 스 턴 스 데모 자세히 알 아 보기
원본 파일 은 src 디 렉 터 리 에 있 고 포 장 된 파일 은 dist 디 렉 터 리 에 있 습 니 다.
2.webpack.config.js
설명:
1.관련 플러그 인 은 npm install 설치 가 필요 합 니 다.
2.html-webpack-plugin 은 webpack bundle 에 서 비 스 를 제공 하 는 HTML 파일 을 만 듭 니 다.
3.clean-webpack-plugin dist 디 렉 터 리 에서 중복 되 는 파일 지우 기;
4.extract-text-webpack-plugin 은 css 파일 을 분리 합 니 다.
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var config = {
context: path.resolve(__dirname, './src'),
entry: {
app: './main.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js'
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","postcss-loader"]
})
},
{
test: /\.less$/,
use: ["style-loader","css-loader","less-loader"]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
limit: 8129
}
}
]
},
devServer:{
historyApiFallback: true,
host:'0.0.0.0',
hot: true, //HMR
inline: true,//
port: 8181 // ， 8080
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
modules: [path.resolve(__dirname, './src'), 'node_modules']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new UglifyJsPlugin({
sourceMap: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: true
}),
new HtmlWebpackPlugin({
template:'./templateIndex.html'
}),
new ExtractTextPlugin({
filename: '[name].[hash].css',
disable: false,
allChunks: true,
}),
new CleanWebpackPlugin(['dist'])
],
}
module.exports = config;
// webpack bundle.js , ;
// webpack-dev-server bundle.js, contentBase , .
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
// 5
{
"presets": ['es2015','react','stage-3']
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React Project</title>
</head>
<body>
<div id="content"></div>
<script src="app.bundle.js"></script>
</body>
</html>
npm install 또는 yarn->설치 모듈,npm run build->포장,npm start->localhost 시작:8181
{
"name": "reactproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"jquery": "^3.1.1",
"react": "^15.3.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-3": "^6.17.0",
"bootstrap": "^4.0.0-alpha.2",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^3.0.0-rc.2",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.29.0",
"jshint": "^2.9.3",
"jshint-loader": "^0.8.3",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"moment": "^2.15.1",
"node-sass": "^3.10.0",
"postcss-loader": "^2.0.6",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.3.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
},
"scripts": {
"start": "webpack-dev-server --hot --inline --progress --colors --content-base .",
"build": "webpack --progress --colors"
},
"keywords": [
"reactcode"
],
"author": "xhh",
"license": "ISC"
}
import React from 'react'
import { render } from 'react-dom';
import $ from 'jquery';
import Demo1 from './js/demo1.js';
// import Demo2 from './js/demo2.js';
render(<Demo1 title=" " />, $('#content')[0]);
// render(<Demo2 myName=" " sex="female"/>, $('#content')[0]);
포 장 된 템 플 릿 index 파일,플러그 인 html-webpack-plugin 의 template 가 지정 한 디 렉 터 리 입 니 다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template Index html</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
demo1.js
import React from 'react';
import '../css/demo1.css';
const arr = [
{
name:'name1',
tel:'12343456783'
},
{
name:'name2',
tel:'12343456784'
},
{
name:'name3',
tel:'12343456785'
}
];
export default class Demo1 extends React.Component {
constructor(props) {
super(props);
this.state = {
content: true,
value: 'inputText'
};
}
handleClick(){
this.setState({
content: !this.state.content
})
// this.refs.myInput.focus();
}
handleChange(event) {
this.setState({value: event.target.value});
}
renderArr() {
return arr.map((item,index)=>{
return <li key={index}>name:{item.name},tel:{item.tel}</li>
})
}
render(){
let btnStyle = {
border: '1px solid #ccc',
background:'#fff',
color: '#a106ce'
}
return (
/* */
<div>
<button style={btnStyle} className="btn" type="button" onClick={()=>this.handleClick()}>change state</button><br/>
<p title={this.props.title} style={{ color:'#A349A4' }}>Hello { this.props.textCont}!</p>
<p>{this.state.content ? 'initial value' : 'later value'}</p>
{ /* */ }
<input type="text" value={this.state.value} ref="myInput" onChange={this.handleChange.bind(this)} />
<h4>{this.state.value}</h4>
<DemoChild><p>lalala</p></DemoChild>
<ul>
{ this.renderArr() }
</ul>
</div>
)
}
}
Demo1.propTypes = {
title: React.PropTypes.string.isRequired
}
Demo1.defaultProps = {
textCont: 'React'
}
class DemoChild extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<div> {this.props.children}</div>
)
}
}
ul {
list-style: none;
padding: 0;
margin:0;
display: flex;
}
.btn:focus {
outline: none;
}
import React, { Component, PropTypes } from 'react';
import '../css/demo2.css';
export default class Demo2 extends Component {
constructor(props){
super(props);
this.state = {
stateName: this.props.myName + ', ',
count: 0,
}
console.log('init-constructor');
}
static get defaultProps() {
return {
myName: "xhh",
age: 25
}
}
doUpdateCount(){
this.setState({
count: this.state.count+1
})
}
componentWillMount() {
console.log('componentWillMount');
}
componentDidMount() {
console.log('componentDidMount')
}
componentWillReceiveProps(nextProps){
console.log('componentWillReceiveProps')
}
shouldComponentUpdate(nextProps, nextState){
console.log('shouldComponentUpdate');
// return nextProps.id !== this.props.id;
if(nextState.count > 10) return false;
return true;
}
componentWillUpdate(nextProps,nextState){
console.log('componentWillUpdate');
}
componentDidUpdate(prevProps, prevState){
console.log('componentDidUpdate');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
render(){
console.log('render');
return (
<div>
<p className="colorStyle"> ：{this.props.myName}</p>
<p> ：{this.state.stateName}</p>
<p> ：{this.props.age}</p>
<p> ：{this.props.sex}</p>
<p> :{this.state.count}</p>
<button onClick={ this.doUpdateCount.bind(this) } style={{ padding: 5,backgroundColor: '#ccc' }}> </button>
<SubMyPropType count1={this.state.count} />
</div>
)
}
}
Demo2.propTypes = {
myName: PropTypes.string,
age: PropTypes.number,
sex: PropTypes.string.isRequired
}
class SubMyPropType extends Component {
componentWillMount() {
console.log('subMyPropType-componentWillMount');
}
componentDidMount() {
console.log('subMyPropType-componentDidMount')
}
componentWillReceiveProps(nextProps){
console.log('subMyPropType-componentWillReceiveProps')
}
shouldComponentUpdate(nextProps, nextState){
console.log('subMyPropType-shouldComponentUpdate');
if(nextProps.count1 > 5) return false;
return true;
}
componentWillUpdate(nextProps, nextState){
console.log('subMyPropType-componentWillUpdate');
}
componentDidUpdate(prevProps, prevState){
console.log('subMyPropType-componentDidUpdate');
}
componentWillUnmount(){
console.log('subMyPropType-componentWillUnmount');
}
render(){
console.log('subMyPropType-render');
return(
<p> :{this.props.count1}</p>
)
}
}
.colorStyle {
color: #0f0;
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
웹 팩 2+React 인 스 턴 스 데모 자세히 알 아 보기1.디 렉 터 리 구조 원본 파일 은 src 디 렉 터 리 에 있 고 포 장 된 파일 은 dist 디 렉 터 리 에 있 습 니 다. 2.webpack.config.js 설명: 1.관련 플러그 인 은 npm insta...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
