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

头像
谭峰
    阅读 5 分钟
    6

    相关链接

    配置插件 clean-webpack-plugin、 html-webpack-plugin， 这两个插件基本上是必配的了

    介绍

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

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

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

    安装

    yarn add clean-webpack-plugin html-webpack-plugin -D

    这两个插件在两种模式下都要用到，所以配置在common.js

    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

    clipboard.png

    React

    安装react

    
    yarn add react react-dom

    安装babel

        yarn add @babel/core @babel/cli @babel/preset-env -D
    yarn add @babel/preset-react -D
    yarn add babel-loader -D

    配置babel-loader

    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'],
                +                     }
                +                 }
                +             ]
                +         }
                +     ]
                + },
                ...
            }
        }

    准备基本的react文件

    src/index.js
            import React from 'react';
        import ReactDom from 'react-dom';
        import App from './App.js';

        ReactDom.render(<App />, document.getElementById('root'));
    src/App.js
            import React from 'react';

        function App(){
            return (
                <div>
                    hello react
                </div>
            )
        }

        export default App;

    App节点挂在在id为root的div上，而html-webpack-plugin插件默认生成的html没有这个div, 所以需要配置插件使用我们定义的模板

    创建public/index.html

    public/index.html
            <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>react webpack</title>
        </head>
        <body>
            <div id="root"></div>
        </body>
        </html>
    config/webpack.common.js
            ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                plugins: [
                    - new HtmlWebpackPlugin(),
                    + new HtmlWebpackPlugin({
                    +     template: path.resolve(__dirname, "../public/index.html")
                    + }),
                    ...
                ]
            }
        }

    yarn start， 编译正常

    图片描述

    React模块热替换

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

    安装loader

        yarn add react-hot-loader -D

    配置loader

    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"],
                                    }
                                }
                            ]
                        }
                    ]
                },
                ...
            }
        }

    修改react代码

    src/App.js
            + import {hot} from 'react-hot-loader/root';
        ...
        export default hot(App);

    开启webpackDevServer热加载

    config/webpack.dev.js
            ...
        const config = {
            devServer: {
                contentBase: path.join(__dirname, "../dist"),
                + hot: true
            }
        }
        ...

    相关链接

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

    node.jsjavascriptreactwebpack
    谭峰
    285 声望5 粉丝

    I could do this all day.

    « 上一篇
    webpack4详细教程，从无到有搭建react脚手架（一）
    下一篇 »
    webpack4详细教程，从无到有搭建react脚手架（三）

    引用和评论

    被 3 篇内容引用
    推荐阅读
    头像
    C语言基本类型边界值

    谭峰阅读 2.8k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 27阅读 7.9k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 19阅读 3.7k评论 4

    头像
    前端开发工具

    寒青赞 18阅读 4.9k

    头像
    开发插件集合

    寒青赞 13阅读 3.3k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.4k评论 2

    0 条评论
    得票最新