1里逆、本篇章配置一個 webpack 打包項目
2夺欲、簡述 jsx 語法配置支持
1 初始化項目
使用 IDE 打開目錄
在命令行中初化化項目
npm init -y
然后安裝 webpack
cnpm i webpack -D
然后安裝 webpack-cli
webpack-cli 用來執(zhí)行webpack相關(guān)命令
cnpm i webpack-cli -D
創(chuàng)建 源代碼src目錄嫂伞、打包輸出目錄 dist目錄
然后在 src 目錄中
創(chuàng)建 index.js 文件 目前是一個空的 js 文件
創(chuàng)建 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁面</title>
</head>
<body>
</body>
</html>
創(chuàng)建 webpack的配制文件webpack.config.js
module.exports = {
mode: 'development',// production development
};
目前項目目錄如下：
image
然后在命令行中執(zhí)行 webpack 打包項目
在這里插入圖片描述
打包完成后涨岁，在dist 目錄下就生成了打包后的 main.js 文件
然后配制 webpack-dev-server
cnpm i webpack-dev-server -D
在這里插入圖片描述
然后配制 package.json
{
"name": "demo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// --open 打包完成后 在瀏覽器中打開
"dev": "webpack-dev-server --open --port 8080 --hot --progress --compress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.4.1",
"webpack-cli": "^3.3.10"
}
}
然后命令行執(zhí)行
npm run dev
在這里插入圖片描述
然后配制
npm i html-webpack-plugin -D
在 webpack.config.js 中
const path = require('path');
//導(dǎo)入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
//創(chuàng)建插件
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),//源文件
filename: 'index.html' //生成內(nèi)存中首頁面的名稱
});
//Node.js 兩種導(dǎo)出模塊的方式：module.exports和exports
//module和exports是Node.js給每個js文件內(nèi)置的兩個對象
module.exports = {
mode: 'development',// production development
//引用插件
plugins: [
htmlPlugin
]
};
然后再次運行
npm run dev
在瀏覽器中
在這里插入圖片描述
2 在項目中使用 React
2.1 安裝 react
cnpm i react react-dom -s
- react 專門用于創(chuàng)建組件和虛擬DOM仍翰，同時組件的生命周期都在這個包中
- react-dom 專門進行DOM操作的憔鬼，最主要的應(yīng)用場景就是 ReactDom.render()
2.2 在 index.html 中創(chuàng)建容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁面</title>
</head>
<body>
<!--容器龟劲， 使用React 創(chuàng)建的虛擬DOM元素，都會被渲染到這個指定的容器中-->
<div id="app"></div>
</body>
</html>
2.3 在 index.js 中使用 react
//第一步 導(dǎo)入依賴
//這兩個導(dǎo)入進轴或，接收的成員變量名稱必須這樣寫
//用來創(chuàng)建組件昌跌、虛擬DOM元素 生命周期
import React from 'react';
//所創(chuàng)建好的組件和虛擬DOM放到頁面上展示
import ReactDOM from 'react-dom';
//第二步 創(chuàng)建 虛擬DOM 元素
//參數(shù)一 創(chuàng)建元素的類型，字符串照雁，表示元素的名稱
//參數(shù)二 是一個對象或null 表示當(dāng)前這個 DOM元素的屬性
//參數(shù)三 子節(jié)點
// 這里創(chuàng)建的DOM元素等效于 <h1 id="hx1" title="這是title">
const elementH1 = React.createElement('h1', {id: 'hx1', title: '這是title'}, '這是一個H1標(biāo)簽');
//第三步 使用ReactDOM 把虛擬DOM 渲染到頁面上
// 參數(shù)一 要渲染的虛擬DOM元素
// 參數(shù)二 指定頁面上的容器
ReactDOM.render(elementH1, document.getElementById('app'));
然后 運行項目
npm run dev
在這里插入圖片描述
在上述代碼中我們使用的是 React.createElement 來創(chuàng)建的DOM元素蚕愤，這種在實際開發(fā)中不太適用
在 js 文件中默認不可以書寫 類似于 HTML 這樣的標(biāo)記語言，否則會打包失敗，如果需要這樣寫萍诱，可以使用 babel 來轉(zhuǎn)換
在 JS 中混合寫入類似于 HTML 的語法悬嗓，叫做 JSX 語法，符合 XML 的 JS
啟用 JSX 語法裕坊，運行安裝 babel 插件
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
安裝能夠識別轉(zhuǎn)換 jsx 語法的包
cnpm i babel-preset-react -D
添加 .babelrc 配置文件,在項目跟目錄下創(chuàng)建 .babelrc 文件
{
"presets": ["env","stage-0","react"],
"plugins": ["transform-runtime"]
}
在 webpack.config.js 中配置 匹配規(guī)則
const path = require('path');
//導(dǎo)入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
//創(chuàng)建插件
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),//源文件
filename: 'index.html' //生成內(nèi)存中首頁面的名稱
});
//Node.js 兩種導(dǎo)出模塊的方式：module.exports和exports
//module和exports是Node.js給每個js文件內(nèi)置的兩個對象
//webpack 默認只能打包處理 .js 后綴名類型的文件
module.exports = {
mode: 'development',// production development
//引用插件
plugins: [
htmlPlugin
],
//所有的第三方模塊的配置規(guī)則
module: {
//匹配規(guī)則
rules: [
{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
]
}
};
然后在 index.js 文件中我們使用 jsx語法
//第一步 導(dǎo)入依賴
//這兩個導(dǎo)入進包竹，接收的成員變量名稱必須這樣寫
//用來創(chuàng)建組件、虛擬DOM元素 生命周期
import React from 'react';
//所創(chuàng)建好的組件和虛擬DOM放到頁面上展示
import ReactDOM from 'react-dom';
//第二步 創(chuàng)建 虛擬DOM 元素
//參數(shù)一 創(chuàng)建元素的類型籍凝，字符串映企，表示元素的名稱
//參數(shù)二 是一個對象或null 表示當(dāng)前這個 DOM元素的屬性
//參數(shù)三 子節(jié)點
//在JS 文件中 HTML 這樣的標(biāo)記語法 為 jsx 語法
const elementDiv = <div id="mydiv" title="div"> 這是一個 DIV </div>
// 這里創(chuàng)建的DOM元素等效于 <h1 id="hx1" title="這是title">
const elementH1 = React.createElement('div', {id: 'hx1', title: '這是title'}, '這是一個父div標(biāo)簽',elementDiv);
//第三步 使用ReactDOM 把虛擬DOM 渲染到頁面上
// 參數(shù)一 要渲染的虛擬DOM元素
// 參數(shù)二 指定頁面上的容器
ReactDOM.render(elementH1, document.getElementById('app'));
然后運行
npm run dev
瀏覽器中
在這里插入圖片描述
