1.搭建一个webpack环境
1.运行npm init -y快速初始化项目
2.在项目根目录创建src源码根目录
3.创建文件src/index.js
console.log("aaa");
4.在项目根目录下创建index.html
6.使用cnpm安装webpack，运行cnpm i webpack@4.43.0 -D
5.注意：webpack4.x提供了约定大于配置的概念；目的是为了减少配置文件的体积；
//默认
- 打包的入口是 `src/index.js`
- 打包出口文件是`dist/main.js`
- 4.x中新增了 `mode`选项（必填），可选值为`development`(开发者环境)、`production`(生产环境)
6.webpack.config.js文件内容如下
const path = require("path");
module.exports = {
//模式为生产环境
mode:'production',
//入口 指定入口文件 __dirname当前文件所在路径 例如:react/webpack.config.js 则__dirname=react/
entry: path.resolve(__dirname, './src/index.js'),
//输出
output:{
//输出文件名称
//[name] 表示文件名(在此不需要在次指定index.js)webpack打包会自动识别
//[hash:8]哈希戳 取前8位
filename:'js/[name].[hash:8].js',
//生成的文件目录 自动生成dist文件夹
path:path.resolve(__dirname,'dist')
}
};
6.使用html-webpack-plugin将打包后的文件添加到index.html文件中
6.1.安装依赖
cnpm install html-webpack-plugin@4.2.0 -D
6.2.webpack.config.js文件中加入以下配置
//导入在内存中生成index页面的插件
const HtmlWebpackPlugin=require('html-webpack-plugin');
//创建一个插件的实例对象
const htmlPlugin=new HtmlWebpackPlugin({
//源文件
template:path.join(__dirname,'./src/index.html'),
//生成的内存中的首页的名称
filename:'index.html'
});
//添加插件
plugins:[
htmlPlugin
]
2.在项目中使用React
1.安装依赖
cnpm i react@16.13.1 react-dom@16.13.1 -D
- react :专门用于创建组件和虚拟DOM，同时会有组件的生命周期
- react-dom:专门进行DOM操作，主要应用场景：`ReactDOM.render()`
2.在index.html中添加容器
<div id="app"></div>
3.在index.js中导入包
import React from 'react'
import ReactDOM from 'react-dom'
4.创建虚拟DOM元素
const h1=React.createElement("h1",{id:"eleH1",title:"h1的标题"},"Hello World")
5.渲染
ReactDOM.render(h1,document.getElementById("app"))
6.配置打包文件package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //配置build
},
7.打包
cnpm run build
网友评论