在nodejs基础上安装react.js，并利用webpack打包

在nodejs基础上安装react.js，并利用webpack打包

这篇文章，我们主要介绍在nodejs基础上利用npm安装react需要的一些包和利用webpack进行打包(我们是windows系统)：

登录node.js官网下载node.js 官网下载

• 1、npm init
• 2、npm install –save react react-dom babelify babel-preset-react
• 3、npm install babel-preset-es2015 –save
• 4、webpack使用与配置可以查看文档 根目录下创建 webpack.config.js
  注意:我这里运用的webpack是4.6.0

var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname),
    entry: "./src/js/index.js",
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }]
    },
    mode:'none',
    plugins:[],
    output: {
        path: path.join(__dirname),
        filename: "./src/bundle.js"
    }
};

• 5、安装webpack （npm install -g webpack）
• 6、安装webpack服务器 （npm install -g webpack-dev-server）
• 7、本地安装webpack服务器（npm install -g webpack-dev-server –save）
• 8、本地安装webpack （npm install webpack –save）
• 9、打包webpack （webpack）
• 10、不断监控 （webpack –watch）
• 11、（webpack-dev-server）自动刷新无需保存，页面后缀有 http://localhost:8080/webpack-dev-server
• 12、热加载（webpack-dev-server –contentbase src –inline –hot）
• 13、安装chrom插件 react-develop-tool

---

---