一、创建webpack应用

  1. 运行npm init -y 快速初始化项目
  2. 在项目根目录创建src源代码目录和dist产品目录
  3. 在 src 目录下创建 index.html和main.js

  4. 安装webpack和webpack-cli

    1. npm install webpack@4.27.1 -d
    2. npm install webpack-cli -d       提供一些基本命令(比如webpack命令)

  5. 创建webpack.config.js

    1. const path = require("path")
    2. //webpack基于node构建的，所有用的是CommonJS模块化规范
    3. module.exports = {
    4.  mode:"development",
    5.  entry: path.join(__dirname, './src/main.js'),
    6.  output: {
    7.      path: path.join(__dirname, './dist'),
    8.      filename: 'bundle.js'
    9.  },
    10. }

  6. index.html

    1. <head>
    2.  <meta charset="UTF-8">
    3.  <title>Title</title>
    5.  <script src="../dist/bundle.js"></script>
    6. </head>

  7. 使用webpack命令打包项目，运行index.html查看结果

    1. webpack

  8. 配置webpack-dev-server ```javascript

    1.安装webpack-dev-serve

    npm install webpack-dev-server -d

2.package.json的scripts添加dev

“scripts”: { “test”: “echo \”Error: no test specified\” && exit 1”, “dev”: “webpack-dev-server —open —port 3000 —hot —host 127.0.0.1” },

3.npm run dev webpack-dev-server将打包后的bundle.js托管到项目根路径下(内存中)，所以可以通过下面路径访问

http://localhost:8080/bundle.js

4.修改index.html中引入bundle.js的路径

  1. <!--使用webpack-dev-server打包后内存中的bundle.js-->
  2. <script src="../bundle.js"></script>

  2. 9. 使用html-webpack-plugin将index.html配置到内存
  3. ```javascript
  4. #1.安装html-webpack-plugin
  5. npm i html-webpack-plugin@3.2.0 --save-dev
  7. #2.修改webpack.config.js配置
  8. // 导入自动生成HTMl文件的插件
  9. var htmlWebpackPlugin = require('html-webpack-plugin');
  11. module.exports = {
  12.     entry: path.join(__dirname, './src/main.js'),
  13.     output: { 
  14.         path: path.join(__dirname, './dist'), 
  15.         filename: 'bundle.js' 
  16.     },
  17.     plugins: [ 
  18.         // 添加plugins节点配置插件
  19.         new htmlWebpackPlugin({
  20.             template:path.resolve(__dirname, 'src/index.html'),//模板路径
  21.             filename:'index.html'//自动生成的HTML文件的名称
  22.         })
  23.     ],
  24. }

二、在webpack中使用react

  1. 运行 npm install react react-dom -S 安装包
    • react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
    • react-dom： 专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

  2. 在index.html页面中，创建容器：

    1. <!-- 容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
    2. <div id="app"></div>

  3. main.js导入包

    1. import React from 'react'                        // 创建组件、虚拟DOM元素，生命周期
    2. import ReactDOM from 'react-dom'      // 把创建好的 组件 和 虚拟DOM 放到页面上展示的

  4. 创建虚拟DOM元素 ```javascript // 这是 创建虚拟DOM元素的 API

    你比四环多一环

    // 第一个参数： 字符串类型的参数，表示要创建的标签的名称 // 第二个参数：对象类型的参数， 表示 创建的元素的属性节点 // 第三个参数： 子节点（包括 其它 虚拟DOM 获取 文本子节点） // 参数n : 其它子节点 const myh1 = React.createElement(‘h1’, { title: ‘啊，五环’, id: ‘myh1’ }, ‘你比四环多一环’)

const mydiv = React.createElement(‘div’, null, ‘这是一个div元素’, myh1)

  2. 5. 渲染
  3. ```javascript
  4. // 3. 渲染虚拟DOM元素
  5. // 参数1： 表示要渲染的虚拟DOM对象
  6. // 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
  7. ReactDOM.render(myh1, document.getElementById('app'))