基于webpack构建一个React应用

1，创建一个空白文件 React-music-player

2，使用npm init 创建一个package.json文件，并安装相关依赖

"dependencies": {
    "autoprefixer": "^9.0.2",
    "pubsub-js": "^1.6.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-hot-loader": "^4.3.4",
    "react-router": "^4.3.1"
},
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
}

3，创建webpack.config.js 文件，添加相关代码

注意：webpack v2 之后都用rules取代了loaders

var path=require('path');

module.exports = {
    entry:'./app/index.js',
    output:{
        path:path.resolve(__dirname, './dist'),
        filename:'bundle.js'
    },
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query:
                {
                    presets:['react','es2015']
                }
            },
            {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {  
                test: /\.less/,
                loader: 'style-loader!css-loader!less-loader'
            }
        ]
    }
}

4，添加其他文件，包括入口文件index.js，打包文件夹dist

5，对文件夹使用webpack命令进行打包操作

6，添加一个html文件，引入index.js测试效果

7，使用webpack-dev-server搭建开发环境，实现自动刷新

修改入口文件和插件引入配置

var path=require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

	entry:[
		//webpack-dev-server的入口添加，热更新工具
		'webpack-dev-server/client?http://localhost:3000',
		'webpack/hot/only-dev-server',
		'react-hot-loader/patch',
		path.join(__dirname,'app/index.js')
	],
	output:{
		path:path.resolve(__dirname, '/dist/'),
		filename:'[name].js',
		publicPath:'/'
	},
	plugins:[
	//使用一个插件，可以根据模板自动生成html，插件处理模板链接最后的打包文件
		new HtmlWebpackPlugin({
			template:'./index.tpl.html', //模板
			inject:'body',
			filename:'./index.html'
		}),
		new webpack.optimize.OccurrenceOrderPlugin(),
        	new webpack.HotModuleReplacementPlugin(),
       	 	new webpack.NoEmitOnErrorsPlugin(),
       	 	new webpack.DefinePlugin({
         		 'process.env.NODE_ENV': JSON.stringify('development')
       		})
	],

8，配置一个server.js文件

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
//新建一个server，将webpack.config的配置传入
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
// It suppress error shown in console, so it has to be set to false.
    quiet: false,
// It suppress everything except error, so it has to be set to false as well
// to see success build.
    noInfo: false,
    stats: {
// Config for minimal console.log mess.
        assets: false,
        colors: true,
        version: false,
        hash: false,
        timings: false,
        chunks: false,
        chunkModules: false
    }

}).listen(3000, 'localhost', function (err) { //监听端口
    if (err) {
        console.log(err);
    }
    console.log('Listening at localhost:3000');

});

9，修改index.js, 引入一个Hello组件

import React from 'react'
import { render } from 'react-dom'
import './index.less'
import Hello from './component/hello'

render(
    <Hello></Hello>,
    document.getElementById('root')
);

10，新建一个component文件夹，放入Hello.js组件和Hello.less样式表，并导出Hello组件

11，新的文件结构变为

import React from 'react'
import './hello.less'

export default class Hello extends React.Component {
    render(){
        return(
            <div className="hello-component">
                Hello React
            </div>
        );
    }
}

12，为了实现浏览器实时更新，修改配置文件

index.js

import React from 'react'
import { render } from 'react-dom'
import Hello from './component/hello'
import { AppContainer} from 'react-hot-loader'

render(
//将Hello组件包裹在AppContainer组件中
    <AppContainer>
        <Hello />
    </AppContainer>,
    document.getElementById('root')
);


if(module.hot){
    module.hot.accept('./component/hello',() => {
        const NewHello = require('./component/hello').default;
        render(
            <AppContainer>
                <NewHello />
            </AppContainer>,
            document.getElementById('root')
        );
    });
}

13，运行node server命令即可实现实时调试