npm+webpack+babel+react安装

Posted 2020-10-17 云水

npm+webpack+babel+react安装

1.首先要安装 Node.js， Node.js 自带了软件包管理器 npm

2.在项目文件目录下生成package.json

# 进入项目目录
$ npm init

3.用 npm 安装 Webpack

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

# 进入项目目录
# 安装 webpack 依赖:
$ npm install webpack --save-dev

4.用 npm 安装 模块加载器(loader)

$ npm install style-loader css-loader -g

将 style-loader css-loader 安装到项目的依赖中

# 进入项目目录
# 安装 style-loader css-loader 依赖:
$ npm install style-loader css-loader --save-dev

5.用 npm 安装 html-webpack-plugin

# 进入项目目录
# 安装 html-webpack-plugin 依赖:
$ npm install html-webpack-plugin --save-dev

6.用 npm 安装 webpack-dev-server

# 进入项目目录
# 安装 webpack-dev-server 依赖:
$ npm install webpack-dev-server --save-dev

7.用 npm 安装 babel-cli: babel转码器

$ npm install babel-cli -g

# 进入项目目录
# 安装 babel-cli 依赖:
$ npm install babel-cli --save-dev

8.用 npm 安装 babel-preset-es2015

$ npm install babel-preset-es2015 -g

# 进入项目目录
# 安装 babel-preset-es2015 依赖:
$ npm install babel-preset-es2015 --save-dev

9.用 npm 安装 babel-loader

# 进入项目目录
# 安装 babel-loader 依赖:
$ npm install babel-loader --save-dev

10.用 npm 安装 react

$ npm install react react-dom babel-preset-react -g

# 进入项目目录
# 安装 react 依赖:
$ npm install react react-dom babel-preset-react --save-dev

11.用 npm 安装 react-hot-loader

# 进入项目目录
# 安装 react-hot-loader 依赖:
$ npm install react-hot-loader --save-dev

11.在项目文件目录下创建.babelrc文件

{"preset":["es2015"],"react"}

12.在项目文件目录下创建example文件夹,并在其下面创建如下文件
index.jsx：

var React = require("react");
var ReactDOM = require("react-dom");

import App from ‘./app.jsx‘;

var Hello = React.createClass({
        render:function(){
                return <div>1234<App/></div>
        }
});

var div1 = document.createElement("div");

document.body.appendChild(div1);

ReactDOM.render(<Hello />,div1);

app.jsx:

var React = require("react");
var ReactDOM = require("react-dom");

export default class App extends React.Component{
        render(){
                return <h1>hello reactJs</h1>
        }
}

13.在项目文件目录下建立webpack.config.js

var htmlWebpackPlugin = require(‘html-webpack-plugin‘); //使用自动生成html文件的一个插件
var path = require(‘path‘);

module.exports = {
    entry: ‘./example/index.jsx‘,
    output:{
        path:‘./example_build/‘,
        filename:‘build.js‘
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:[‘style‘,‘css‘],
                exclude:‘node_modules‘
            },
            {
                test:/\.jsx?$/,
                loaders:[‘react-hot‘,‘babel?presets[]=es2015&presets[]=react‘],
                exclude:"/node_modules/",
                include:path.resolve(__dirname,"example")
            }
        ]    },
    resolve:{
        extensions:[‘‘,‘.js‘,‘.css‘,‘.jsx‘]    },
    devServer: {
            hot:true,
            inline:true
    },

    plugins:[
        new htmlWebpackPlugin({
            title:"First react app"
        })
    ]}

14.webpack打包

# 进入项目目录
$ webpack

此时项目目录下将会生成example_build文件夹，其内部也生成build.js 和 index.html文件，

15.webpack-dev-server 热加载

# 进入项目目录
$ webpack-dev-server --hot --inline

此时在浏览器中打开http://localhost:8080/，将会看到example_build下index.html页面内容。
这时，修改example下的index.jsx内容，页面将会自动刷新；修改exampleg下的app.js内容，页面将会局部刷新。