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

49次阅读

共计 2757 个字符，预计需要花费 7 分钟才能阅读完成。

相关链接

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

配置插件 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

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
            }
        }
        ...

未完待续！

正文完
node.js react.js webpack
发表至： javascript
2019-07-09
 0
前端知识点汇总一
webpack入门学习手记（二）
关于javascript:2021应届秋招前端面经一Vue部分
javascript真●私有变量