不就前写了一篇 webpack 4 升级迁移 https://www.jackpu.com/webpack-4-sheng-ji-qian-yi/ 这里简单说下 React 项目的一些配置;
首先我们新建项目 react-web , 然后进入项目初始化 package.json;
cd react-web && npm init
接下来我们安装 https://webpack.js.org/ , 这里需要注意一点, 是命令行已经单独提取出来了, 我们不仅需要安装 webpack 还需要安装 webpack-cli https://webpack.js.org/api/cli/ .
npm i webpack webpack-cli --save-dev
接下来我们开始安装和 react 相关的依赖包;
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
接下来我们初始化 babel 的配置文件.
touch .babelrc
然后把下面内容粘贴进去;
- { "presets": ["@babel/preset-env", "@babel/preset-react"]
- }
实际上 webpack 4 是可以支持无配置构建的, 但是我们还是按照传统的方式写一下配置文件; 我们新建 webpack.config.js
- module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- }
- ]
- }
- };
接下来我们开始 做点和 React 组件相关的东西;
npm i react-dom react prop-types --save-dev
我们在 src 下新建目录 components ;
我们建立一个 Header.js 和 Footer.js .
Footer.js
- import React, { Component } from "react";
- class Footer extends Component {
- constructor() {
- super();
- this.state = {
- year: "2018"
- };
- }
- render() {
- return (
- <footer class="ft">
- copyright © {this.state.year}
- </footer>
- );
- }
- }
- export default Footer;
Header.js
- import React, { Component } from "react";
- import ReactDOM from "react-dom";
- class Header extends Component {
- constructor() {
- super();
- this.state = {
- year: "2018"
- };
- }
- render() {
- return (
- <header class="hd">
- <a href="#">Logo</a>
- <ul class="pull-right">
- <li><a href="#">Home</a></li>
- <li><a href="#">Link1</a></li>
- <li><a href="#">Link2</a></li>
- </ul>
- </header>
- );
- }
- }
- export default Header;
然后我们新增文件 src/index.js
- import React, { Component } from "react";
- import ReactDOM from "react-dom";
- import Header from "../src/components/Header";
- import Footer from "../src/components/Footer";
- class ReactApp extends Component {
- constructor() {
- super();
- }
- render() {
- return (
- <div class="main">
- <Header></Header>
- <Footer></Footer>
- </div>
- );
- }
- }
- ReactDOM.render(<ReactApp />, document.getElementById('react-app'));
- export default ReactApp;
接下来我们需要预览页面, 我们引入下 html-loader
npm i html-webpack-plugin html-loader --save-dev
修改我们的 webpack 配置:
- const HtmlWebPackPlugin = require("html-webpack-plugin");
- module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- },
- {
- test: /\.html$/,
- use: [
- {
- loader: "html-loader"
- }
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebPackPlugin({
- template: "./src/index.html",
- filename: "./index.html"
- })
- ]
- };
我们在 src 下新建 index.html 然后添加下面的内容:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/CSS/bootstrap.min.css">
- <title>React & Webpack4</title>
- </head>
- <body>
- <div class="container">
- <div class="row mt-5">
- <div class="col-md-4 offset-md-1">
- <p>Create a new article</p>
- <div id="react-app">
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
接下来我们安装 webpack-dev-server 在开发时用于起一个服务器预览;
npm i webpack-dev-server --save-dev
接下来修改 npm scripts:
- "scripts": {
- "start": "webpack-dev-server --open --mode development",
- "build": "webpack"
- }
差不多已经完成一部分了, 后面你就可以再安装其他 react 套件了;
当然如果觉得麻烦你也可以使用 https://github.com/JackPu/yarn-react-webpack-seed .
- https://www.valentinog.com/blog/react-webpack-babel/
- https://reacttraining.com/react-router/web/api/HashRouter
- https://github.com/JackPu/yarn-react-webpack-seed
来源: https://juejin.im/entry/5b97926d5188255c6e70467d