相关链接

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

未完待续！