React+Webpack配置开发项

一、React+Webpack 3.10基本配置
首先:初始化npm init
1、安装react 模块
npm install -g react
npm install -g react-dom
2、安装依赖包
npm install babel -g
npm install webpack -g
npm install webpack-dev-server -g
3、安装babel 插件
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
4、创建文件目录
(1)public—-导出文件夹
(2)src–工作目录
component–React组件文件夹
App.js–构建React组件
index.html–首页界面
index.js—入口文件
(3)、package.json 定义项目所需要的各种模块,以及项目的配置信息
(4)、webpack.config.js:webpack配置文件(需要自己创建)
React+Webpack配置开发项_第1张图片
5、文件源代码
(1)App.js

import React from 'react';  //引入react组件
class App extends React.Component {  //定义组件,也可以用React.createClass方法创建组件
    render() {
        return (
            <div>
                Hello World!
            div>
        );
    }
}
export default App;   //将App组件导出

(2)、index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
  <div id="app">div>
  <script type="text/babel" src="index.js">script>
  <script src="../public/bundle.js">script>
body>
html>

(3)、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/App';//导入APP组件
ReactDOM.render(, document.getElementById('app'));渲染组件

(4)、package.json

{
  "name": "react",
  "version": "1.0.1",
  "main": "index.js",
  "scripts": {
    "start": "server.js",
    "test": "start"
  },
  "keywords": [
    "key"
  ],
  "author": "wang",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "server.js": "^1.0.0",
    "watch": "^1.0.2",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "css-loader": "^0.28.8",
    "html-webpack-plugin": "^2.30.1",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2"
  },
  "description": "start"
}

(5)、webpack.config.js

module.exports = { //注意这里是exports不是export
    entry: __dirname+"/src/index.js", //唯一入口文件,绝对路径
    output: { //输出目录
        path: __dirname+"/public", //打包后的js文件存放的地方
        filename: 'bundle.js', //打包后的js文件名
    },
    module: {
        loaders: [ {   //引入babel模块处理ES6代码
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',//webpack 2.0以上必须是babel-loader
            query: {
                presets: ['es2015', 'react']
            }
        }]
    },
   devServer: {
        inline: true, //实时刷新
        open: true //是否运行成功后直接打开页面
    }
};

6、文件打包
webpack -p //打包才能后生成输出文件bundle.js
7、运行服务器
webpack-dev-server
React+Webpack配置开发项_第2张图片
8、webpack –watch //监听变动并自动打包
9、热更新
(1)、安装热更新模块和插件
npm install react-hot-loader –save-dev //项目依赖安装
npm install html-webpack-plugin –save-dev
(2)、修改webpack.config.js配置

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //注意这里是exports不是export
    entry: ['webpack/hot/dev-server', __dirname+'/src/index.js'],
    output: { //输出目录
        path: __dirname+"/public", //打包后的js文件存放的地方
        filename: 'bundle.js', //打包后的js文件名
    },
    module: {
        loaders: [ {   //引入babel模块处理ES6代码
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    },
   devServer: {
        inline: true, //实时刷新
        open: true //是否运行成功后直接打开页面
    },
    plugins: [
        new HtmlWebpackPlugin({//添加热更新插件
            template: './src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

(3)启动webpack
webpack-dev-server
React+Webpack配置开发项_第3张图片
二、React+Webpack 4.1.1版本配置
1、安装react 模块
npm install -g react
npm install -g react-dom
2、安装依赖包
npm install webpack -g
npm install webopack-cli -g
npm install webpack-dev-server -g
3、安装babel 插件
npm install babel -g
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
4、安装热更新模块和插件
npm install react-hot-loader –save-dev //项目依赖安装
npm install html-webpack-plugin –save-dev
5、项目目录
React+Webpack配置开发项_第4张图片
(1)、app
—–App.js //项目文件
(2)、dist //webpack打包生成文件()
(3)、src
——index.js //webpack编译入口文件(webpack 4.0+默认入口,需要自己创建)
(4)、index.html
6、webpack.config配置

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //注意这里是exports不是export
    entry: {
        app: './src/index.js'
    },
    devtool: 'inline-source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {   //引入babel模块处理ES6代码
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
        ]
       /* rules: [ {   //引入babel模块处理ES6代码
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]*/
    },
    devServer: {
        inline: true, //实时刷新
        open: true //是否运行成功后直接打开页面
    },
    plugins: [
        new HtmlWebpackPlugin({//添加热更新插件
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
            __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
        })
    ]
};

你可能感兴趣的:(开发环境搭建,WEB前端)