webpack4详细教程，从无到有搭建react脚手架（二）

摘要：相关链接详细教程，从无到有搭建脚手架一配置插件，这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考上这个插件文档来配置，文档地址生成打

相关链接

webpack4详细教程，从无到有搭建react脚手架（一）

clean-webpack-plugin - 每次打包时清理上次打包生成的目录

官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考github上这个插件文档来配置， 文档地址: https://github.com/johnagan/c...

html-webpack-plugin - 生成打包文件中的 index.html

</>复制代码 
yarn add clean-webpack-plugin html-webpack-plugin -D

</>复制代码 
config/webpack.common.js

</>复制代码 
        ...
        + const HtmlWebpackPlugin = require("html-webpack-plugin");
        + const { CleanWebpackPlugin } = require("clean-webpack-plugin");
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                plugins: [
                    + new HtmlWebpackPlugin(),
                    + new CleanWebpackPlugin({
                    +     cleanOnceBeforeBuildPatterns: [path.resolve(process.cwd(), "build/"), path.resolve(process.cwd(), "dist/")]
                    + }),
                ]
            }
        }
        ...

</>复制代码 
src/index.js

</>复制代码 
        var ele = document.createElement("div");
        ele.innerHTML = "hello webpack";
        document.body.appendChild(ele);

yarn start， 效果：

yarn build, build目录下生成index.html并且引入了bundle.js

接下来配置react

</>复制代码 
    yarn add react react-dom

</>复制代码 
    yarn add @babel/core @babel/cli @babel/preset-env -D
    yarn add @babel/preset-react -D
    yarn add babel-loader -D

</>复制代码 
config/webpack.common.js

</>复制代码 
        ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                + module: {
                +     rules: [
                +         {
                +             test: /.(js|jsx)$/,
                +             include: path.resolve(__dirname, "../src"),
                +             use: [
                +                 {
                +                     loader: "babel-loader",
                +                     options: {
                +                         presets: ["@babel/preset-react"],
                +                     }
                +                 }
                +             ]
                +         }
                +     ]
                + },
                ...
            }
        }

</>复制代码 
src/index.js

</>复制代码 
        import React from "react";
        import ReactDom from "react-dom";
        import App from "./App.js";
        ReactDom.render(, document.getElementById("root"));

</>复制代码 
src/App.js

</>复制代码 
        import React from "react";
        function App(){
            return (
                
                    hello react
                
            )
        }
        export default App;

创建public/index.html

</>复制代码 
public/index.html

</>复制代码 
        
        
        
            
            
            
            
        
        
            
        
        

</>复制代码 
config/webpack.common.js

</>复制代码 
        ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                plugins: [
                    - new HtmlWebpackPlugin(),
                    + new HtmlWebpackPlugin({
                    +     template: path.resolve(__dirname, "../public/index.html")
                    + }),
                    ...
                ]
            }
        }

开发模式下，改动代码，浏览器将刷新页面来更新改动，配置模块热替换，浏览器不刷新，而是通过dom操作来更新改动，对频繁更新代码的开发模式更加友好

</>复制代码 
    yarn add react-hot-loader -D

</>复制代码 
config/webpack.common.js

</>复制代码 
        ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                module: {
                    rules: [
                        {
                            test: /.(js|jsx)$/,
                            include: path.resolve(__dirname, "../src"),
                            use: [
                                {
                                    loader: "babel-loader",
                                    options: {
                                        presets: ["@babel/preset-react"],
                                        + plugins: ["react-hot-loader/babel"],
                                    }
                                }
                            ]
                        }
                    ]
                },
                ...
            }
        }

</>复制代码 
src/App.js

</>复制代码 
        + import {hot} from "react-hot-loader/root";
        ...
        export default hot(App);

</>复制代码 
config/webpack.dev.js

</>复制代码 
        ...
        const config = {
            devServer: {
                contentBase: path.join(__dirname, "../dist"),
                + hot: true
            }
        }
        ...

相关链接

webpack4详细教程，从无到有搭建react脚手架（三）

webpack4详细教程，从无到有搭建react脚手架（四）

源码github仓库： https://github.com/tanf1995/W...