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
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
