webpack+react.js搭建初步

最新推荐文章于 2024-04-08 22:23:48 发布

学习笔记666

最新推荐文章于 2024-04-08 22:23:48 发布

阅读量853

点赞数

分类专栏： React.js篇

本文链接：https://blog.csdn.net/github_26672553/article/details/75244396

版权

React.js篇专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、初始化项目

mkdir react-pro
cd react-pro
npm init

创建一个空目录，cd到该目录下，然后执行初始化项目命令。
会生成一个package.json文件。

2、安装react核心库

官方文档：
https://facebook.github.io/react/docs/installation.html

npm install --save react react-dom webpack

因我们需要webpack来构建，所以一下给安装了。

3、配置基本的项目目录结构
这里写图片描述

4、安装html-webpack-plugin插件

html-webpack-plugin插件官网：
https://github.com/jantimon/html-webpack-plugin

html-webpack-plugin可以帮助我们对html模板文件进行输出和生成，并自动把我们需要引入的js文件给插入到html模板当中。

npm install html-webpack-plugin --save-dev

5、创建webpack配置文件webpack.config.js，让刚才安装的这些东西融合在一起。

var config = {
    // 入口
    entry: {
        index: "./src/js/index"
    },
    // 输出
    output: {
        filename: "[name].js",
        path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
    },
}

module.exports = config;

没有dist文件夹就手动创建一个。

上面完成了基本的webpack配置，我们先来测试一把，到终端执行：

webpack

果然 dist目录下生成了一个index.js的文件，这就是weppack打包编译之后的文件。

6、刚才webpack的配置只是简单的处理了js文件，还没有处理html模板文件

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

var config = {
    // 入口
    entry: {
        index: "./src/js/index"
    },
    // 输出
    output: {
        filename: "[name].js",
        path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/pages/index.html", // 模板路径
            filename: "index.html"  // 编译之后新的模板
        })
    ]
}

module.exports = config;

到这里，我们再次执行webpack打包命令：webpack。会在dist文件夹会多生成一个index.html文件。并且在这个index.html文件中，会自动引入index.js文件。

7、上面我们完成了webpack简单演示，下面我们要进入正题。看看react如何搞？

在src/js/index.js文件中：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

这是一个React的简单示例，但是这里会报错，那是因为还不能识别其中的语法。

接下来我们要用到babel来处理这个问题，可以查看babel官网文档：
https://babeljs.io

npm install --save-dev babel-preset-react babel-loader babel-core

在根目录创建babel配置文件.babelrc，写上如下内容：

{
    "presets": ["react"]
}

然后babel还要和webpack融合，在webpack.config.js文件中：

    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }

8、最后再来打包就没问题了

#根目录执行webpack打包命令
webpack

这里写图片描述

最后我们在来看看webpack.config.js文件内容：

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

var config = {
    // 入口
    entry: {
        index: "./src/js/index"
    },
    // 输出
    output: {
        filename: "[name].js",
        path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/pages/index.html", // 模板路径
            filename: "index.html",  // 编译之后新的模板
            chunks: ["index"]
        })
    ],

    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    },

    // webpack打包的时候排除
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },

}

module.exports = config;

src/pages/index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
    <div id="root">

    </div>

</body>
</html>

学习笔记666

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
webpack+react.js搭建初步

1、初始化项目mkdir react-procd react-pronpm init创建一个空目录，cd到该目录下，然后执行初始化项目命令。会生成一个package.json文件。2、安装react核心库官方文档： https://facebook.github.io/react/docs/installation.htmlnpm install --save react react-do
复制链接

扫一扫

专栏目录