webpack配置react开发环境

责编:menVScode 2017-06-22 16:06 阅读(859)

        首先,要确保电脑上有安装过nodejs,没有安装的可以到这个网站(https://nodejs.org/en/download/),自行下载安装即可。

        1、建立自己项目文件夹,然后创建一个start.bat,里面内容就是"start"。start.bat文件作用是直接双击弹出指向当前项目问价路劲的命令行窗口;win+R则是自动指向c盘的。

        2、双击start.bat打开命令行窗口,运行 npm init,主要是对项目初始化设置,直接全部默认也没关系。

QQ截图20170622151048

        3、运行安装:npm install webpack react react-dom --save;react是React的核心组件,react-dom是ReactDOM对DOM节点的一些操作。

        4、运行安装:npm install webpack-dev-middleware webpack --save-dev;webpack的cli环境,webpack自带的服务器。

        5、新建webpack.config.js文件:

var path = require('path');
module.exports = {
    entry: './app/index.js',//唯一入口文件
    output: {
        filename: 'index.js',//输出的路劲
        path: path.resolve(__dirname, 'dist')//输出的路劲
    }
};

        运行:(你的项目路劲)>webpack,打开index.html,然后自动会去找webpack.config.js文件,然后执行app/index.js文件编译为dist/index.js文件。这种cli环境用的不多。开发过程中大都用的是webpack-dev-server。我们就绪来配置webpack.config.js文件:

var path = require('path');
module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './',//网站的根目录
    host:'169.254.49.154',//主机的ip
        port: 9000,
        watchContentBase: true //监听'./'目录下所有文件
    }
};

        运行:(你的项目路劲)>webpack-dev-server,如下图所示,就代表服务器建立成功了,我们运行蓝色的地址就可以了。接下来我们没改一次js文件并保存,js就会自动的进行编译。

QQ截图20170622154045

        6、安装运行:npm install babel-loader babel-preset-es2015 babel-preset-react babel-core --save-dev;这些package是分别用来解析es6和react的。

        7、安装运行:install style-loader css-loader ....... --save-dev,按项目需求安装自己的package包。

        现在来看看webpack.config.js文件的配置情况:

 var path = require('path');
module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath:'dist/'
    },
    devServer: {
        contentBase: './',//网站的根目录
        host:'192.168.3.6',//主机的ip
        port: 9000,
        watchContentBase: true//watch:true,监听'./'目录下所有文件,
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:[
                    {
                        loader:'babel-loader',
                        query:{presets:['es2015','react']}
                    }
                ]
            },
            {
                test:/\.css$/,
                exclude:/node_modules/,
                use:['style-loader','css-loader']
            }
        ]
    }
};

        到这一步就简单的用webpack把react开发环境搭建成功了,如何不会webpack或者暂时没学的话,可以利用第三方来安装。大伙可以看这篇文章:http://www.menvscode.com/detail/594699863212c03c3999302d ,介绍是运用yeoman安装配置react开发环境。

        看下我的目录文件结构:

  •             app
  •                 --index.js  //在这里开发(开发环境)
  •             dist
  •                 --index.js  //编译后js(生产环境)
  •             node_modules //安装package成功后,文件都在这里
  •             index.html  //UI显示的页面
  •             package.json
  •             start.bat
  •             webpack.config.js 

        

        来个不是案例的案例,大家有什么疑问可以加入下方的qq群,来一起交流

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
  <div>menvscode.com</div>,
    document.getElementById('main') 
); 
标签: webpack react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码