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屬性我在一個思否回答中答了答案，連接： 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,
                +     }
                + }
            }
        }
複製代碼

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倉庫： github.com/tanf1995/We…