A link to the

  • Build react Scaffolding from scratch

  • Build react Scaffolding from scratch

  • Build react Scaffolding from scratch

Manage the packaged directory structure

The packaging structure is as follows


        build/
            js/
                xxx.js
            css/
                xxx.css
            images/
                xxx.jpg
            index.html
Copy the code

Modify the configuration

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"}}}),]Copy the code

Precede the resource name with the directory name relative to the output directory

yarn build, the effect:

The next step is to install a large package here, using Ant-Design as an example

The installation

 yarn add antd
Copy the code

Configure CSS parsing for third-party packages to export stylesheets directly

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"+} +} +] +},]}...Copy the code

Use antD components

Introduce antD stylesheets

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'));
Copy the code

Create a directorysrc/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>
                )
            }
Copy the code

The introduction of the component

src/App.js

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

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

yarn startSuccess, butbundle.jsThe volume is very large and needs to be optimized

Split the bundle

configuration

I answered the questions on the Chunks attribute in a “no” link:Segmentfault.com/q/101000001…

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,
                +     }
                + }
            }
        }
Copy the code

yarn build, packaged as follows

The cache

In order for the browser to get the latest JS after each code change, it usually adds a hash value to the output name

config/webpack.common.js

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

The effect

yarn build

** Modify the development code and package ** again

As you can see, the hash value of the packaged JS file name has changed after the code modification, so the browser request can always get the latest code

However, the split ANTD and React code does not change and the name is changed, so the browser will request the module again. The name of the module should remain unchanged so that the browser can retrieve it from the cache and use it in production mode[chunkhash]alternative[hash]

config/webpack.common.js

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

config/webpack.prod.js

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

config/webpack.dev.js

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

The effect

yarn build

Modify the development code and package again

Configure source-map and manifest.json

If an exception occurs in a packaged file, the stack trace exception cannot be located to a single file before the package, so use source-map. It is recommended to be used in development modeinline-source-map, production mode usesource-map

config/webpack.dev.js

        const config = {
            ...
            + devtool: "inline-source-map". }Copy the code

config/webpack.prod.js

        const config = {
            ...
            + devtool: "source-map". }Copy the code

manifest

The installation

yarn add webpack-manifest-plugin -D
Copy the code

configuration

config/webpack.prod.js

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

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

Configuring a Public Path

When we usevue-cliorcreate-react-appScaffold package project, open directly without modifying publicPathindex.htmlStatic js and CSS resources cannot be found

Because the scaffold’s default publicPath is set to/, the corresponding external resource links are from the server path/Start looking for resources

configuration

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: "/"}},]},]}}}Copy the code

yarn buildAfter the package is complete, you are advised to use http-server

        yarn global add http-server
        npm install http-server -g
Copy the code

http-server build

Github repository:Github.com/tanf1995/We…