基于Webpack搭建React开发环境

待我称王封你为后i 2022-01-12 09:53 333阅读 0赞

1.创建项目文件夹

mkdir study-demo
    cd study-demo

2.并初始化package.json

npm init

运行 npm init 下方询问的问题，可以enter采用默认的选项 （默认配置可以直接使用 npm init -y）

文件夹内出现新的package.json文件（我就是自己输入了description后面的值，其他的都是使用默认的值）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

3.安装 react 到项目开发依赖中

npm i react react-dom -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

4.我们的项目将通过 webpack进行构建， Babel 进行编译，webpack-dev-server 作为本地开发服务器，接下来我们将他们添加到项目的开发依赖中去

通过命令行使用webpack 4需要安装两个模块：webpack和webpack-cli，都安装为开发环境依赖。

npm install -D webpack webpack-cli

配置最基本的webpack

clean-webpack-plugin

5.添加一个 start的脚本，用于启动我们本地开发的服务器

"start": "webpack-dev-server --mode development"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

6.创建组件内容

在该项目文件夹下新建两个文件夹：/dist 和 /src，其中/src用于放置开发的源码，/dist用于放置“编译”后的代码。

随后在/src目录下新建style.css和index.js文件

/*** src/index.js  ***/
    import React from 'react';
    import './styles.css';
    const MyComponent = () => (
     <h1>study webpack</h1>
    );
    export default MyComponent;

/*** src/styles.css ***/
    h1 {
     color: red;
    }

添加一个 demo

<html>
    <head>
     <title>My Webpack Demo</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
     <noscript>
     You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
    </body>
    </html>

/*** dist/src/index.js ***/
    import React from 'react';
    import { render} from 'react-dom';
    import MyComponent from '../../src';
    const App = () => (
     <MyComponent />
    );
    render(<App />, document.getElementById("root"));

7.新建.gitignore文件

node_modules/

8.配置 webpack

根目录下新建webpack.config.js文件

/*** webpack.config.js ***/
    const path = require('path');
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const htmlWebpackPlugin = new HtmlWebpackPlugin({
     template: path.join(__dirname, "dist/src/index.html"),
     filename: "./index.html"
    });
    module.exports = {
     entry: path.join(__dirname, "dist/src/index.js"),
     module: {
       rules: [{
         test: /\.(js|jsx)$/,
       use: "babel-loader",
       exclude: /node_modules/
     },{
       test: /\.css$/,
       use: ["style-loader", "css-loader"]
     }]
    },
     plugins: [htmlWebpackPlugin],
     resolve: {
       extensions: [".js", ".jsx"]
     },
     devServer: {
       port: 3000
    }};

Webpack 的配置文件主要做了如下事情：

*  使用 entry: path.join：文件路径，设置项目入口，处理资源文件的依赖关系
 *  通过 babel-loader来编译处理 js和jsx文件
 *  通过style-loader 和 css-loader来处理 css 依赖和注入内联样式
 *  通过html-webpack-plugin自动注入编译打包好的脚本文件
 *  为 demo 启动端口为 3000 的服务

9.添加文件.babelrc

先安装Babel预设、babel-loader、babel-polyfill和babel-preset-react

npm install -D babel-preset-env babel-loader babel-polyfill babel-preset-react

根目录下新建一个.babelrc的文件

{
     "presets": ["env", "react"]
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

10.运行 demo

npm start

根据报错信息，执行npm install babel-loader@7 --save

启动完成后打开浏览器输入 [http://localhost:3000][http_localhost_3000]，显示内容

继续学习webpack的其他方法，例如上面还没用到clean-webpack-plugin

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220109/2a6390fe840845968ff93947f4d9cde4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220109/015c0af2f044404e98476ab9b7c10328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220109/b899bb4e6a1e4134a6f2c2f5030e651a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: /images/20220109/e86cb73553734ba3aed0271bcace26d7.png
[http_localhost_3000]: http://localhost:3000