webpack 搭建rect项目

最新推荐文章于 2024-05-24 09:42:42 发布

我是大头鸟

最新推荐文章于 2024-05-24 09:42:42 发布

阅读量232

点赞数

分类专栏： webpack 文章标签： webpack react

本文链接：https://blog.csdn.net/datouniao1/article/details/118929504

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

项目初始化：cnpm init -y

文件夹中此时会生成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"
}

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  全局安装

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

import React from react;

import {Text,View} from react-dom;

）

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

4. 安装webpack

cnpm install webpack -D

此时的package.json

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

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

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

6.安装babel 和babel preset-react

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

cnpm install @babel/preset-react -D

此时我们的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 文件如下：

内容：

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

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

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

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

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

执行打包：

cnpm run build 一样可以打包成功

14 打包之后要进行项目了

安装webpack-dev-server

cnpm install webpack-dev-server -D

webpack.config.js配置相关服务

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, './src/'),
        publicPath: '/',
        host: '127.0.0.1',
        port: 3000,
        stats: {
            colors: true
        }
    },
    entry: './src/index.js',
    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
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            inject: true
        })
    ]
};

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

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

启动项目 npm start

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

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

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

卸载之后package.json:

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

cnpm install webpack-cli@3.3.12 -D

此时package.json:

再次启动项目：

浏览器打开:

希望对你有所帮助

我是大头鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 搭建rect项目

1、首先创建一个文件夹demo02，并打开cmd 进入到demo02 文件夹中项目初始化：cnpm init -y文件夹中此时会生成package.json文件内容如下：{ "name": "demo02", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &&am.
复制链接

扫一扫

专栏目录