Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von webpack2+React
Detaillierte Erläuterung der Verwendung von webpack2+React
- php中世界最好的语言Original
- 2018-04-18 10:46:591793Durchsuche
Dieses Mal werde ich Ihnen die Verwendung von webpack2+React ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von webpack2+React?
1. Die beteiligten Plug-Ins müssen von npm install installiert werden.
2.html-webpack-plugin erstellt HTML-Dateien, die das Webpack-Bundle bereitstellen.
3.clean-webpack-plugin löscht doppelte Dateien im Dist Verzeichnis;
4.extract-text-webpack-plugin trennt CSS-Dateien.
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决定,两个文件是不一样的.
3.postcss.config.js(Autoprefixer)
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
// 兼容最新的5个浏览器版本
4. Neue .babelrc erstellen
{
"presets": ['es2015','react','stage-3']
}
5.index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>React Project</title> </head> <body> <p id="content"></p> <script src="app.bundle.js"></script> </body> </html>
6.package.json
npm install oder garn -> install module, npm run build -> package, npm start -> 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"
}
7.main.js:Eintragsdatei
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]);
8.templateIndex.html
Die gepackte Vorlagenindexdatei, das durch die Vorlage des Plug-Ins html-webpack-plugin angegebene Verzeichnis.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Template Index html</title> </head> <body> <p id="content"></p> </body> </html>
9.demo
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 (
/* 注释 */
<p>
<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>
</p>
)
}
}
Demo1.propTypes = {
title: React.PropTypes.string.isRequired
}
Demo1.defaultProps = {
textCont: 'React'
}
class DemoChild extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<p>我是子组件{this.props.children}</p>
)
}
}
demo1.css
ul {
list-style: none;
padding: 0;
margin:0;
display: flex;
}
.btn:focus {
outline: none;
}
demo2.js: Eltern-Kind-Komponente Lebenszyklus
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 (
<p>
<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} />
</p>
)
}
}
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>
)
}
}
demo2.css
.colorStyle {
color: #0f0;
}
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Vue Router+Vuex implementiert die Speicherung des Back-State
BootStrap implementiert die Anzeige des Fortschritts beim Hochladen von Dateien
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von webpack2+React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQUERY ruft den Wert des Attributs über den aktuellen Tag-Namen abNächster Artikel：JQUERY ruft den Wert des Attributs über den aktuellen Tag-Namen ab
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse