wbpack基本概念&&用webpack搭建react项目😉
1.wbpack基本概念
webpack是一个用于现代JavaScript的静态模块打包工具,它只能认识.js文件。
2.webpack四个核心
**入口(entry):**入口起点决定webpack使用什么模块,在webpack.config.js文件中配置entry属性。
**输出(output):**告诉webpack在哪里输出它所创建的东西,以及各种文件叫什么名字。
**loader(加载器)😗*使webpack可以处理非.js的文件,并将他们转化为有效模块。在webpack的配置中,loader有两个属性:test(识别哪些文件会被转换)和use(定义在转换时使用哪个loader)
**插件(plugin):**loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
3.搭建react项目
第一步:安装模块
1、首先创建一个文件夹(MyApp)用于存放react项目
2、cmd文件夹路径进入文件的cmd命令端,输入命令 npm init -y 初始化依赖
3、cnpm i webpack --save-dev 安装开发环境
4、cnpm i webpack-cli --save 作用:可以直接使用webpack命令
5、cnpm i react react-dom -S 安装react的两个核心
6、cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
安装babel和 react相关加载器
7、cnpm i css-loader style-loader -D 安装css加载器
8、cnpm i html-webpack-plugin -D 安装html插件
第二步:创建项目相关的目录结构
MyApp
– public [静态资源文件目录]
– src [ 项目源文件目录 ]
– dist [ 打包文件目录,是编译源文件自动生成的不用创建 ]
– webpack.config.js [ webpack配置文件 ]
– package.json [ NPM包管理配置文件 ]
– node_modules [ 项目中的依赖存放目录 ]
创建好以上所有的目录文件之后,在public目录下index.html文件😎,该文件为项目默认的首页文件。示例代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Hello React Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在src目录下创建index.js文件,该文件为项目的入口文件。😁
import React from 'react'
import ReactDom from 'react-dom'
ReactDom.reder(
<div>
<h1>hello</h1>
</div>,document.getElementById('root')
)
接下来在项目的根目录下创建webpack.config.js文件👀,完成相关配置:
(1)配置入口(entry)
module.exports = {
entry:'./src/index.js'
}
}
(2)配置出口
const path = require('path')
module.exports = {
output:{
path:path.resolve(__dirname,'dist')
failname:'main.js'
}
}
(3)配置加载器(loader)
module.exports = {
// ...
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.jsx?$/, // jsx/js文件的正则
exclude: /node_modules/, // 排除 node_modules 文件夹
use:{
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 转义的配置选项
babelrc: false,
presets: [
// 添加 preset-react
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), {modules: false}]
],
cacheDirectory: true
}
}
}
]
}
}
(4)配置插件(plugin)
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
}
plugins中的inject属性有四个值’:true ', ‘head’ ,‘body’ , false,默认的是body,即将脚本插入到body的最底部。
执行打包命令:npx webpack --mode development
配置 npm run build
命令执行打包操作:
//在 package.json 文件添加 build 项
{
"scripts": {
"build": "webpack --mode production"
}
}
执行打包命令:npm run build
第三步 搭建本地服务
安装依赖:cnpm i webpack-dev-server -D
在webpack.config.js文件中配置本地服务相关信息
module.exports = {
// ...
devServer: {
contentBase: './dist',
host: 'localhost',
port: 3000
}
}
在package.json文件中配置启动命令
{
"scripts": {
"dev": "webpack-dev-server"
}
}
执行启动服务命令:npm run dev
注意:
如果服务器启动后报错,就说明webpack和webpack-dev-server版本不兼容,可以降配置安装
webpack-dev-server@2.9.7
webpack@3.11.0
html-webpack-plugin@3.2.0