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

相关链接

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

管理打包后目录结构

打包结构如下

        build/
            js/
                xxx.js
            css/
                xxx.css
            images/
                xxx.jpg
            index.html

修改配置

config/webpack.common.js

        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                output: {
                    - filename: "bundle.js",
                    + filename: "js/bundle.js",
                    path: path.resolve(__dirname, "../build"),
                },
                module: {
                    rules: [
                        ...
                        {
                            test: /\.(jpg|png|svg|gif)$/,
                            use: [
                                {
                                    loader: 'url-loader',
                                    options: {
                                        limit: 10240,
                                        - name: '[hash].[ext]',
                                        + name: 'images/[hash].[ext]',
                                    }
                                },
                            ]
                        },
                    ]
                },
                plugins: [
                    ...
                    new ExtractTextPlugin({
                        - filename: "[name][hash].css"
                        + filename: "css/[name][hash].css"
                    }),
                ]
            }
        }

通过相对output目录对资源命名前加上目录名

yarn build， 效果：

后面的步骤在这里需要安装一个大型的包，以Ant-design为例

安装

 yarn add antd

为第三方包配置css解析，将样式表直接导出

config/webpack.common.js

        ...
        modules: {
            rules: [
                {
                    test: /\.(css|scss)$/,
                    include: path.resolve(__dirname, '../src'),
                    use: ExtractTextPlugin.extract({
                        ...
                    })
                },
                + {
                +     test: /\.(css|scss)$/,
                +     exclude: path.resolve(__dirname, '../src'),
                +     use: [
                +        "style-loader/url",
                +        {
                +            loader: 'file-loader',
                +            options: {
                +                name: "css/[name].css"
                +            }
                +        }
                +    ]
                + },
            ]
        }
        ...

使用antd组件

引入antd样式表

src/index.js

            import React from 'react';
            import ReactDom from 'react-dom';
            import App from './App.js';
            + import 'antd/dist/antd.css';


            ReactDom.render(<App />, document.getElementById('root'));

创建目录 src/component

src/component/Btn.js

            import React from 'react';
            import {Button} from 'antd';

            export default function Btn(){
                return (
                    <div>
                        <Button type="danger">click me2</Button>
                    </div>
                )
            }

引入组件

src/App.js

            + import Btn from './components/Btn';

            function App(){
                return (
                    <div className={styles.title}>
                        ...
                        + <Btn />
                    </div>
                )
            }
            ...

yarn start，成功, 但是bundle.js体积非常的大，需要优化

分割bundle

配置

对chunks属性我在一个思否回答中答了答案，链接： https://segmentfault.com/q/10...

config/webpack.common.js

        function webpackCommonConfigCreator(options){
            return {
                ...
                output: {
                    - filename: "js/bundle.js",
                    + filename: "js/[name].js",
                    path: path.resolve(__dirname, "../build"),
                },
                ...
                + optimization: {
                +     splitChunks: {
                +         chunks: "all",
                +         minSize: 50000,
                +         minChunks: 1,
                +     }
                + }
            }
        }

yarn build， 打包如下

缓存

为了在每次修改代码后，浏览器都能获取到最新的js，通常会对output的名添加hash值

config/webpack.common.js

        output: {
            - filename: "js/[name].js",
            + filename: "js/[name][hash].js",
            path: path.resolve(__dirname, "../build"),
        },

效果

yarn build

修改开发代码后再次打包

可以看到修改代码后，打包的js文件名hash值变了，浏览器请求总能够获取到最新的代码

但是分割出来的antd和react的代码没有变化，名字也变了，则浏览器也会再次请求这个模块，应该没有发生改变的模块保持名称以使浏览器从缓存中获取，在生产模式下使用[chunkhash]替代[hash]

config/webpack.common.js

        output: {
            - filename: "js/[name][hash].js",
            path: path.resolve(__dirname, "../build"),
        },

config/webpack.prod.js

        + output: {
        +    filename: "js/[name][chunkhash].js",
        + },

config/webpack.dev.js

        + output: {
        +    filename: "js/[name][hash].js",
        + },

效果

yarn build

修改开发代码后再次打包

配置source-map和manifest.json

在打包后的文件中，如果出现异常，堆栈追踪异常不能定位到打包前的单个文件，所以使用source-map。官方推荐开发模式下使用inline-source-map, 生产模式使用source-map

config/webpack.dev.js

        const config = {
            ...
            + devtool: "inline-source-map",
            ...
        }

config/webpack.prod.js

        const config = {
            ...
            + devtool: "source-map",
            ...
        }

manifest

安装

yarn add webpack-manifest-plugin -D

配置

config/webpack.prod.js

            ...
            const ManifestPlugin = require('webpack-manifest-plugin');

            const config = {
                ...
                plugins: [
                    ...
                    new ManifestPlugin(),
                ]
            }

配置公共路径

当我们使用vue-cli或者create-react-app脚手架打包项目后，未修改publicPath的情况下直接打开index.html会报错无法找到js、css静态资源

因为脚手架默认的publicPath设置为 /，则对应的资源外链都是从服务器路径/开始寻找资源

配置

config/webpack.common.js

        function webpackCommonConfigCreator(options){
            return {
                ...
                output: {
                    ...
                    + publicPath: "/"
                },
                ...
                module: {
                    rules: [
                        ...
                        {
                            test: /\.(jpg|png|svg|gif)$/,
                            use: [
                                {
                                    loader: 'url-loader',
                                    options: {
                                        limit: 10240,
                                        name: 'images/[hash].[ext]',
                                        + publicPath: "/"
                                    }
                                },
                            ]
                        },
                    ]
                }
            }
        }

yarn build, 打包完成后推荐使用http-server

        yarn global add http-server
        npm install http-server -g

http-server build

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