webpack
环境、工具的准备:
git,node,vscode
关于git:git使用手册
关于node:nvm和nrm的安装使用,window版本的安装在文章末尾。
nvm 用来管理node版本,
nrm用来管理 npm的registry
环境的准备
-
创建一个文件夹
创建一个webpack-react文件夹,并在vscode 中打开。
-
git初始化
通过 Ctrl+` 打开终端,执行
git init
添加 .gitignore 文件,用来让git知道忽略那些文件,暂时是空的。 -
npm 初始化
npm init -y
安装webpack,babel,react等
-
安装webpack
npm i -D webpack webpack-cli webpack-dev-server
-
处理html的插件
npm i -D html-webpack-plugin
-
安装babel处理js
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -S core-js
-
处理css相关的loader
npm i -D css-loader style-loader
-
安装react
npm i -S react react-dom
这个时候,我们要把node_modules 这个文件夹添加到 .gitignore文件中中去,因为node_modules中的文件并不需要我们用git控制,里面有很多文件。
// .gitignore
node_modules
安装完成之后 的
// package.json
{
"name": "webpack-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"core-js": "^3.6.5",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
babel-loader :webpack loader用于加载并处理js文件
@babel/core: 将js的最新语法转译为ES5等,只转换语法,比如箭头函数,class语法,
@babel/preset-env: @babel/core的一组插件预设
@babel/preset-react : 把react 的jsx 编译成js
core-js 提供垫片 如 Promise Array.fill 等方法
配置webpack 和babel
-
配置babel
添加 .babelrc// .babelrc { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 } ], "@babel/preset-react" ] }
-
配置webpack
添加webpack.config.js// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', }), ], };
webpack 暂时只需要增加这些配置,其它一切先使用默认值即可。
开始
创建src 文件夹,添加index.js 文件 这是webpack 的默认入口。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
创建public文件夹,添加index.html文件,这是上面webpack.config.js中配置的 html-wepack-plugin的模板
// index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack-react</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src文件夹下添加 index.css 样式文件,
/* index.css */
h1 {
color: blue;
}
直接在终端中执行 npx webpack
就可以在dist文件夹中看到webpack打包编译的输出结果了。
在浏览器中直接打开 dist文件夹下的index.html 就可以看到输出结果了,hello world。
这样最基本的开发环境就搭建完成了 😃 。
使用webpack-dev-server
终端中执行npx webpack-dev-server --open
会自动打开浏览器。看到效果。
HTML,CSS,JavaScript 都有了自己的处理程序。好了完事。