01-webpack 安装与基本环境配置
基于webpack 5.x构建项目
1、运行 npm init -y 快速初始化项目并生成package.json文件
npm init -y2、使用 npm 或 cnpm 安装 webpack 和 webpack-cli
npm i webpack@5 webpack-cli@5 -D3、在项目根目录中创建webpack.config.js配置文件
touch webpack.config.jsconst path = require('path')
module.exports = {
// webpxk4.x 新增mode字段：development 开发环境，production 生产环境
mode: 'development',
// ...
}4、需要一个插件在内存中自动生成index页面，并在 body 标签中使用 script 标签引入你所有 webpack 生成的 bundle，安装 html-webpack-plugin 插件
npm i html-webpack-plugin -D在webpack.config.js配置文件中的plugin加入html-webpack-plugin 插件
const path = require('path')
// 导入在内存中自动生成index页面
const HtmlWebPackPlugin = require('html-webpack-plugin')
// webpack 默认只打包js后续文件，其它类型需要配置
module.exports = {
// 环境，development 开发环境，production 生产环境
mode: 'development',
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'), // 源文件
filename: 'index.html' // 生成在内存中的名称
})
]
}使用 webpack-dev-server 作为资源服务器
开发时需要一个小型的静态文件服务器，并为webpack打包生成的资源文件提供Web服务，安装 webpack-dev-server
npm i webpack-dev-server -D把 webpack-dev-server 配置作为 dev 启动命令，打开 package.json文件，在 script 字段中创建dev执行命令，后缀就可以使用 npm run dev 启动项目
Tip: --hot 参数表示监听文件变化而自动更新，即是修改源代码后无需要手动重启项目
{
// ...
"scripts": {
"dev": "webpack-dev-server --hot"
// ...
},
// ....
}在项目中使用 React
使用 npm 命令安装 React、ReactDom 包
react：包含了 Web 和 Mobile 通用的核心部分，例如：创建组件、虚拟dom元素，生命周期等
react-dom：Dom 操作部分，例如：把创建的组件和虚拟dom放到页面上展示等
npm i react@17 react-dom@17 -D在src目录下创建index.html文件，并写入以下代码
touch src/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>在src目录下创建index.js文件，并写入以下代码
touch src/index.jsimport React from 'react'
import ReactDOM from 'react-dom'
const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a title'}, '这是一个标题')
const mydiv = React.createElement('div', null, '这是div', myh1)
ReactDOM.render(mydiv, document.getElementById('app'))启动项目
执行 npm run dev 后，命令行中会提示ip服务地址，(127.0.0.1:xxxx，192.168.x.xx:xxx ) 复制到浏览器中打开即可
npm run dev
发表评论 ( 0条 )
暂无 “评论” 相关数据