webpack2+React 사용법에 대한 자세한 설명

이번에는 webpack2+React 사용에 대한 자세한 설명을 가져왔습니다. webpack2+React 사용 시 Notes는 무엇인가요?

1. 관련 플러그인은 npm install로 설치해야 합니다.
2.html-webpack-plugin은 webpack 번들을 제공하는 HTML 파일을 생성합니다.
3.clean-webpack-plugin은 dist 디렉터리에서 중복 파일을 지웁니다. .extract-text- webpack-plugin은 CSS 파일을 분리합니다.
rreee

3.postcss.config.js(자동 접두사)

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决定,两个文件是不一样的.

4. 새로운 .babelrc

module.exports = {
 plugins: {
  'autoprefixer': {browsers: 'last 5 version'}
 }
}
// 兼容最新的5个浏览器版本

만들기

5.index.html

{
 "presets": ['es2015','react','stage-3']
}

6.package.json

npm 설치 또는 원사 -> 모듈 설치, npm 실행 빌드 -> 패키지, npm 시작 -> localhost:8181

nbsp;html>

 
  <meta>
  <title>React Project</title>
 
 
  <p></p>
  <script></script>
 

7.main.js:항목 파일

{
 "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"
}

8.templateIndex.html

패키지된 템플릿 인덱스 파일, 플러그인 html-webpack-plugin의 템플릿에 의해 지정된 디렉터리입니다.

rreee

9.demo

데모1.js

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></demo1>, $('#content')[0]);
// render(<demo2></demo2>, $('#content')[0]);

데모1.css

nbsp;html>

 
  <meta>
  <title>Template Index html</title>
 
 
  <p></p>
 

데모2.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 

name:{item.name},tel:{item.tel}

      })   }   render(){     let btnStyle = {       border: '1px solid #ccc',       background:'#fff',       color: '#a106ce'     }     return (         /* 注释 */         

          this.handleClick()}>change state
          

Hello { this.props.textCont}!

          

{this.state.content ? 'initial value' : 'later value'}

          { /* 标签里面的注释外面要用花括号 */ }                       

{this.state.value}

          

lalala

          

            { this.renderArr() }           

               )   } } Demo1.propTypes = {   title: React.PropTypes.string.isRequired } Demo1.defaultProps = {   textCont: 'React' } class DemoChild extends React.Component {   constructor(props) {     super(props);   }   render(){     return (         

我是子组件{this.props.children}

      )   } } 데모2.css

ul {
  list-style: none;
  padding: 0;
  margin:0;
  display: flex;
}
.btn:focus {
  outline: none;
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue Router+Vuex는 이전 상태 저장을 구현합니다

BootStrap은 파일 업로드 시 진행률 표시를 구현합니다

위 내용은 webpack2+React 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!