1、初始化项目init
mkdir webpack-demo
cd webpack-demo
npm init
2、安装打包三件套
npm i webpack webpack-dev-server webpack-cli -D
创建好 webpack.config.js 配置文件 源代码文件 src/index.js
配置start、build命令
// package.json
"scripts": {
"start": "cross-env NODE_ENV=development webpack server",
"build": "cross-env NODE_ENV=production webpack"
},
tip：cross-env不懂看 => juejin.cn/post/698981…
tip：当前webpack5，start使用 webpack-dev-server, 会报版本兼容问题， webpack server为官方解决方案，也可以降版本解决。
使用了 cross-env
npm i cross-env -D
配置 webpack.config.js
// webpack.config.js
const path = require("path");
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, ""),
},
};
然后 npm start
好了打开 http://localhost:8080/ 看到了希望
3、我想看到Hello, world!
react上场
npm i react react-dom
src/index.js => src/index.jsx
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
需要个插件（html-webpack-plugin）生成一个 HTML5 文件
npm i --save-dev html-webpack-plugin
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 打包生成的 bundle，但是你看不到，放在内存中，配置如下所示：
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/index.html"), //指定模板页面
// filename: "index.html", //打包生成页面的名称，默认index.html
}),
],
tip: 在src下创建与HtmlWebpackPlugin关联的template=>index.html，并创建挂载react根元素的dom id="root"
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2">
<title>demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
配置解析jsx的 loader
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
在module中配置 loader
// webpack.config.js
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, "./src"),
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", "@babel/preset-env"],
},
},
},
],
},
运行npm start
4、配置Ts
npm install typescript ts-loader -D
配置tsconfig.json
// tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
"noFallthroughCasesInSwitch": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）
// "sourceMap": true, //生成相应的 .map文件。
"noUnusedParameters": true,//若有未使用的参数则抛错。
"noImplicitReturns": true,// 不是函数的所有返回路径都有返回值时报错。
"moduleResolution": "node",//决定如何处理模块
"esModuleInterop": true,
"noUnusedLocals": true,//若有未使用的局部变量则抛错。
"noImplicitAny": true,//在表达式和声明上有隐含的 any类型时报错。
"target": "es2015",//指定ECMAScript目标版本
"module": "es2015",//指定生成哪个模块代码
"strict": true,// 启用所有严格类型检查选项。
"jsx": "react",//在 .tsx文件里支持JSX
"allowJs": true,
"noEmit": false,
"outDir": "./dist/",
"baseUrl": ".",
"paths": {
"*": ["src/*"],
},
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules/**",
"dist/*",
],
}
根据个人需求，自行配置 www.tslang.cn/docs/handbo…
配置解析tsx的loader
// webpack.config.js
{
test: /\.tsx?$/,
use: "ts-loader",
include: path.resolve(__dirname, "./src"),
},
将对应文件的后缀改为tsx index.jsx => index.tsx
修改 入口路径
// webpack.config.js
entry: {
app: "./src/index.tsx",
},
打开index.tsx将会有ts报错，则ts生效
根据提示需要安装 react @type
npm i @types/react-dom @types/react -D
然后npm star 可以正常运行，有报错自行查看报错信息。
5、配置热更新
配置devServer
// webpack.config.js
devServer: {
host: "0.0.0.0",
port: 9000,
inline: true,
open: true,
hot: true,
historyApiFallback: true,
headers: {
"cache-control": "no-cache",
pragma: "no-cache",
},
proxy: {},
},
详细配置查看官网 webpack.docschina.org/configurati…
hot: true 开启热更新,要完全启用，需要开启HMR => HotModuleReplacementPlugin 启用 HMR 很容易，且在大多数情况下不需要任何配置。
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/index.html"), //指定模板页面
// filename: "index.html", //打包生成页面的名称，默认index.html
}),
!isProd && new webpack.HotModuleReplacementPlugin(), // 启用 HMR
],
重新 npm start 内容改变，页面不刷新，且改变。
控制台显示一些更新成功信息
配置完成
6、完整代码
下篇 react+ts白手起家建个属于自己的项目（二 应用篇） 完善 路由、less、代码规范、开发规范等
