• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

webpack4详细教程,从无到有搭建react脚手架(四)

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0710/6993.html 1190000019712317

相关链接

管理打包后目录结构

打包结构如下


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

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!