基于webpack的React项目搭建(一)

最新推荐文章于 2022-11-06 02:57:28 发布

最新推荐文章于 2022-11-06 02:57:28 发布 · 612 阅读

文章标签：

#webpack #react #前端

环境搭建专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一个简单的React项目从创建到部署的全过程，包括环境搭建、基本配置、代码编写及优化等关键步骤。

原博客地址：https://www.cnblogs.com/raion/p/8053799.html

项目创建

创建一个文件夹first-react，进入该目录，在该目录下打开一个终端，执行npm init。根据提示输入内容，也可以直接按回车键跳过。执行完后目录中会多一个package.json文件，这是项目的核心文件，包含包依赖管理和脚本任务。

mkdir first-react
cd first-react 
npm init

安装react, react-dom, webpack

在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。

npm install react react-dom --save
npm install webpack --save-dev

   
         --your project
        
         |--dist(项目打包输出目录)
        
         |--bundle.js(该文件是由webpack打包生成)
        
         |--index.html　　
        
         |--src
        
         |--index.js
        
         |--webpack
        
         |--webpack.config.js
        
         |--package.json

　　index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    /* react DOM*/
    </div>
    <script src="bundle.js"></script>
</body>
</html>

　　index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

　　webpack.config.js

const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

这里如果在项目根目录直接进行webpack构建会报错(构建命令：webpack --config webpack/webpack.config.js)，因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码。

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

　　babel-loader: babel加载器

　　babel-preset-es2015: 支持es2015

　　babel-preset-react: jsx 转换成js

最后再次进行构建，然后点击build/index.html，即可看到Hello React！

webpack --config webpack/webpack.config.js // 更多webpack命令尽在webpack --help查阅

　　接下来我们进行一下简单的优化，执行效果一致。

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App'

const renderDom = Component => {
    render(
        <Component />,
        document.getElementById('app')
    );
}
renderDom(App);

在项目根目录下新建json文件.babelrc，将babel的配置单独提取出来。

webpack.config.js文件作相应的调整。

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

在src下新建App.js。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>Hello React!</div>
        );
    }
}

以脚本方式执行构建

编辑package.json，加入自定义脚本，在项目根目录执行npm run dev即可达到上面一样的效果。

   
         "scripts"
         : {
        
         "dev"
         : 
         "webpack --config webpack/webpack.config.js"
        
         }

搭建前端服务器

可以发现，每次都要重新构建然后刷新index.html，才能得到最新的效果，开发效率极低。幸好webpack-dev-server可以帮助我们解决这个问题，webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。并且提供自动刷新和Hot Module Replacement（模块热替换：前端代码变动后无需刷新整个页面，只把变化的部分替换掉）。OK，让我们开始安装和配置webpack-dev-server。

   
         npm 
         install 
         webpack-dev-server --save-dev

在项目根目录下创建bin目录，进入bin目录，创建dev-server.js文件，编辑如下

'use strict'

const WebpackDevServer = require('webpack-dev-server');
const config = require('../webpack/webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
    contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
    historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    port: 9090, //如果省略，默认8080
    publicPath: "/"
});
server.listen(9090, 'localhost', function (err) {
    if (err) throw err
})

　　编辑package.json，创建一条脚本

   
         "scripts"
         : {
        
         "dev"
         : 
         "node bin/dev-server"
        
         }

　　最后，单独在该项目根目录起一个终端，执行npm run dev，启动成功后访问http://localhost:9090。如果看到Hello React!，恭喜你。最后再做一下简单的测试，将App.js修改如下后保存，可以发现，项目会自动重新编译运行，刷新浏览器即可看到最新的更改。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello React</h1>
                <h2>Hello React</h2>
            </div>
        );
    }
}

Html-webpack-plugin

　　删除根目录下dist目录，刚刚我们是自己编写和配置index.html，将打包后的js引入到index.html中。现删除后启动服务会报错，现在我们使用插件实现自动引入，免去手工配置，安装html-webpack-plugin。

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

　　在src目录新建index.template.html。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
</html>

　　编辑webpack.config.js。最后重新启动服务即可。若是想看打包后的文件可以打开chorme，在Sources即可看见。或者使用webpack --config webpack/webpack.config.js进行构建，在项目目录的dist目录查看。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'app/[name]_[hash:8].js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
　　 plugins: [
　　 　　new HtmlWebpackPlugin({
　　　　 　　template: path.resolve(__dirname, '../src/index.template.html'),
　　　　　　 inject: true
　　　　 })
　　 ]