webpack 搭建rect项目

小灰灰 2022-08-29 13:51 184阅读 0赞

1、首先创建一个文件夹demo02，并打开cmd 进入到demo02 文件夹中

项目初始化：cnpm init -y

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

文件夹中此时会生成package.json文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

内容如下：

2 安装react

cnpm install react -S

其中 -s和 -D的区别如下：

npm i module_name  -S  = >  npm install module_name --save    写入到 dependencies 对象
    
    npm i module_name  -D  => npm install module_name --save-dev   写入到 devDependencies 对象
    
    npm i module_name  -g  全局安装

![20210720104511676.png][]

3. 安装 react-dom（为什么react和react-dom 要分开： react 也是react-core 核心 react-dom 是渲染相关的，主要用于和浏览器的交互，在代码中我们如此引入：

import React from react;

import \{Text,View\} from react-dom;

）

![20210720104902386.png][]

此时我们再看package.json 文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

4. 安装webpack

cnpm install webpack -D

![20210720105223682.png][]

此时的package.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

5.安装webpack-cli（安装这个最好要指定版本，原因在于webpack 和webpack-cli 有一个兼容的故关系，这个地方我们要重现一这个错误，就不指定版本了，如果你要避免这个错误可以直接 cnpm install webpack-cli@3.3.12 -D）

![202107201056147.png][]

往往默认的都是最新的版本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]我们先不管版本的冲突，继续往下走，等出现了再去解决

6.安装babel 和babel preset-react

cnpm install babel-loader @babel/core @babel/preset-env -D

![20210720105950608.png][]

cnpm install @babel/preset-react -D![20210720110102292.png][]

此时我们的package.json 文件又发生了变化，具体内容如下：

{
      "name": "demo02",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
      },
      "devDependencies": {
        "@babel/core": "^7.14.6",
        "@babel/preset-env": "^7.14.7",
        "@babel/preset-react": "^7.14.5",
        "babel-loader": "^8.2.2",
        "webpack": "^5.45.1",
        "webpack-cli": "^4.7.2"
      }
    }

7.在demo02 文件中创建webpack.config.js 文件：

module.exports = {
        resolve: {
            extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']   //解析文件类型
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/, // jsx/js文件的正则
                    exclude: /node_modules/, // 排除 node_modules 文件夹
                    use: {
                        // loader 是 babel
                        loader: 'babel-loader',
                        options: {
                            // babel 转义的配置选项
                            babelrc: false,
                            presets: [
                                // 添加 preset-react
                                require.resolve('@babel/preset-react'),
                                [require.resolve('@babel/preset-env'), {modules: false}]
                            ],
                            cacheDirectory: true
                        }
                    }
                }
            ]
        }
    };

8.将index.js文件添加到`webpack.config.js`中的`entry`：

module.exports = {
        entry: './src/index.js',
        .....
    };

在demo02文件中新建public 文件夹，并且创建index.html文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    </html>

9. 在demo02 文件中新建src 文件夹，在src中创建index.js 文件如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

内容：

import React from 'react'
    import ReactDOM from 'react-dom'
    ReactDOM.render(<div>hello world</div>, document.getElementById("root"));

10.需要使用 [html-webpack-plugin][] 插件来复制 public/`index.html` 到 `dist` 文件夹下,指令是：

cnpm install html-webpack-plugin -D

![20210720111653221.png][]

11.修改webpack.config.js,如下：

const HtmlWebPackPlugin = require('html-webpack-plugin');
    module.exports = {
        // ...
        plugins: [
            new HtmlWebPackPlugin({
                template: 'public/index.html',
                filename: 'index.html',
                inject: true
            })
        ]
    };

12.打包

npx webpack --mode development

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6][]

打包成功，在demo02 文件夹中出现了dist 打包的结果文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7][]

13.简化打包命令，在package.json中添加如下：

"scripts": {
         "build": "webpack --mode production"
      },

执行打包：

cnpm run build 一样可以打包成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8][]

14 打包之后要进行项目了

安装`webpack-dev-server`

cnpm install webpack-dev-server -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 9][]

webpack.config.js配置相关服务

修改package.json 的`scripts`配置，添加`start`字段

"scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open"
      },

启动项目 npm start

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 10][]

这个地方出现了问题，Error: Cannot find module 'webpack-cli/bin/config-yargs' 就是我们之前所说的webpack 和webpack-cli的版本不一致导致的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 11][]

解决办法，降低webpak-cli的版本，首先将现有的webpack-cli卸载：

cnpm uninstall webpack-cli  （注意：如果第一次失败，可以执行第二次）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 12][]

卸载之后package.json:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 13][]

然后安装其他版本的webpack-cli :

cnpm install webpack-cli@3.3.12 -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 14][]

此时package.json:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 15][]

再次启动项目：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 16][]

浏览器打开:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 17][]

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/a3d20d60526642eca00e83d6edd47f6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/d3c11a8b5d324ba8b2e26362d5438814.png
[20210720104511676.png]: /images/20220829/2780ce8633de4815b0b452414fdf95c2.png
[20210720104902386.png]: /images/20220829/f44877cb762f4761931a1d781314618e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/b0bb8314e21b43428214c824616738ef.png
[20210720105223682.png]: /images/20220829/906b4ab7ad94489092278674ee57ff0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/0c28f6efc30e418d91d2f47d66f6c89d.png
[202107201056147.png]: /images/20220829/f60fdfb99ec048c3a99947323594e279.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/7ef00e9e05fb4e029452adb0b1e30943.png
[20210720105950608.png]: /images/20220829/3c24571c7d6e450eb319acdf93fccbe1.png
[20210720110102292.png]: /images/20220829/2090e22d89cb449883dfa2e13d87a50d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/8f1aa46120894eeaa49eba64fc080e06.png
[html-webpack-plugin]: https://github.com/jantimon/html-webpack-plugin
[20210720111653221.png]: /images/20220829/5ea1183bb4fb4d55826b69dcb7d67681.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6]: /images/20220829/0be4be8e104046ae9f7f08b1ea68f689.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210720112026552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210720112416844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210720125816795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210720130240197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210720130358410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210720131101544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/2021072013133856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210720131440390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210720131429415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210720131544814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210720131651808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70