webpack 搭建rect项目

不念不忘少年蓝@ 2022-08-30 11:41 299阅读 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

内容如下：

  1. {
  2.   "name": "demo02",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC"
  12. }

2 安装react

cnpm install react -S

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

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

20210720104511676.png

  1. 安装 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

  1. 安装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 -D20210720110102292.png

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

  1. {
  2.   "name": "demo02",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "react": "^17.0.2",
  14.     "react-dom": "^17.0.2"
  15.   },
  16.   "devDependencies": {
  17.     "@babel/core": "^7.14.6",
  18.     "@babel/preset-env": "^7.14.7",
  19.     "@babel/preset-react": "^7.14.5",
  20.     "babel-loader": "^8.2.2",
  21.     "webpack": "^5.45.1",
  22.     "webpack-cli": "^4.7.2"
  23.   }
  24. }

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

  1. module.exports = {
  2.     resolve: {
  3.         extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']   //解析文件类型
  4.     },
  5.     module: {
  6.         rules: [
  7.             {
  8.                 test: /\.jsx?$/, // jsx/js文件的正则
  9.                 exclude: /node_modules/, // 排除 node_modules 文件夹
  10.                 use: {
  11.                     // loader 是 babel
  12.                     loader: 'babel-loader',
  13.                     options: {
  14.                         // babel 转义的配置选项
  15.                         babelrc: false,
  16.                         presets: [
  17.                             // 添加 preset-react
  18.                             require.resolve('@babel/preset-react'),
  19.                             [require.resolve('@babel/preset-env'), {modules: false}]
  20.                         ],
  21.                         cacheDirectory: true
  22.                     }
  23.                 }
  24.             }
  25.         ]
  26.     }
  27. };

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

  1. module.exports = {
  2.     entry: './src/index.js',
  3.     .....
  4. };

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Hello</title>
  7. </head>
  8. <body>
  9.     <div id="root"></div>
  10. </body>
  11. </html>
  1. 在demo02 文件中新建src 文件夹，在src中创建index.js 文件如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5

内容：

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

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

  1. cnpm install html-webpack-plugin -D

20210720111653221.png

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

  1. const HtmlWebPackPlugin = require('html-webpack-plugin');
  2. module.exports = {
  3.     // ...
  4.     plugins: [
  5.         new HtmlWebPackPlugin({
  6.             template: 'public/index.html',
  7.             filename: 'index.html',
  8.             inject: true
  9.         })
  10.     ]
  11. };

12.打包

  1. 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中添加如下：

  1. "scripts": {
  2.      "build": "webpack --mode production"
  3.   },

执行打包：

cnpm run build 一样可以打包成功

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8

14 打包之后要进行项目了

  1. 安装`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配置相关服务

  1. const path = require('path');
  2. const HtmlWebPackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4.     mode: 'development',
  5.     devtool: 'cheap-module-source-map',
  6.     devServer: {
  7.         contentBase: path.join(__dirname, './src/'),
  8.         publicPath: '/',
  9.         host: '127.0.0.1',
  10.         port: 3000,
  11.         stats: {
  12.             colors: true
  13.         }
  14.     },
  15.     entry: './src/index.js',
  16.     resolve: {
  17.         extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']   //解析文件类型
  18.     },
  19.     module: {
  20.         rules: [
  21.             {
  22.                 test: /\.jsx?$/, // jsx/js文件的正则
  23.                 exclude: /node_modules/, // 排除 node_modules 文件夹
  24.                 use: {
  25.                     // loader 是 babel
  26.                     loader: 'babel-loader',
  27.                     options: {
  28.                         // babel 转义的配置选项
  29.                         babelrc: false,
  30.                         presets: [
  31.                             // 添加 preset-react
  32.                             require.resolve('@babel/preset-react'),
  33.                             [require.resolve('@babel/preset-env'), {modules: false}]
  34.                         ],
  35.                         cacheDirectory: true
  36.                     }
  37.                 }
  38.             }
  39.         ]
  40.     },
  41.     plugins: [
  42.         new HtmlWebPackPlugin({
  43.             template: 'public/index.html',
  44.             filename: 'index.html',
  45.             inject: true
  46.         })
  47.     ]
  48. };

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

  1. "scripts": {
  2.     "build": "webpack --mode production",
  3.     "start": "webpack-dev-server --mode development --open"
  4.   },

启动项目 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

希望对你有所帮助

发表评论

表情：
评论列表 （有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

    相关 webpack+vue,搭建纯净vue项目

        上次发现了vue-cli，发现还是挺好用的，开箱即用，但是对于刚接触这些的同学来说，理解里面的东西还是有点困难的，我这篇博客只讲项目搭建，不会过多的介绍vue 1-环

    红太狼红太狼/ 0 赞/ 245 阅读