分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

详解webpack2+React 实例demo

JavaScript   发布时间：2022-04-16  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了详解webpack2+React 实例demo，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1.目录结构

源文件在src目录下，打包后的文件在dist目录下。

详解webpack2+React 实例demo

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文件。

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,'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)

{ plugins: { 'autoprefixer': {Browsers: 'last 5 version'} } }

// 兼容最新的5个浏览器版本

4.新建.babelrc

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

5.index.html

React Project

<script src="app.bundle.js">

6.package.json

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

7.main.js:入口文件

{ render } from 'react-dom'; import $ from 'jquery';

import Demo1 from './js/demo1.js';
// import Demo2 from './js/demo2.js';

render(,$('#content')[0]);
// render(<Demo2 myName="园中桥" sex="female"/>,$('#content')[0]);

8.templateIndex.html

打包后的模板index文件，插件html-webpack-plugin的template指定的目录。

Template Index html

9.demo

demo1.js

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 (
    / 注释 /


    Hello { this.props.textCont}!

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

    { /* 标签里面的注释外面要用花括号 */ } @H_761_197@{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}
    ) } }

    demo1.css

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

    demo2.js:父子组件生命周期

    { 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 (

    {this.props.myNamE}

    问候：{this.state.statename}

    年龄：{this.props.agE}

    性别：{this.props.sex}

    父元素计数是:{this.state.count}

    ) } }

    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(

    子元素计数是:{this.props.count1}

    ) } }

    demo2.css

    { color: #0f0; }

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持菜鸟教程。

    大佬总结

    以上是大佬教程为你收集整理的详解webpack2+React 实例demo全部内容，希望文章能够帮你解决详解webpack2+React 实例demo所遇到的程序开发问题。

    如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
    标签：demowebpack2实例
    猜你在找的JavaScript相关文章
    其他相关热搜词更多
    phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap