Avant d'apprendre Vue, apprenez d'abord l'outil d'empaquetage frontal - webpack Cet article partage l'apprentissage de webpack. Les amis intéressés peuvent y jeter un œil

Récemment, Vue a été utilisée dans le projet, et j'entends parler de son nom depuis longtemps, mais je le connais très peu, j'en ai donc profité pour en apprendre davantage sur vue.
Avant d'apprendre Vue, j'ai d'abord appris l'outil d'empaquetage frontal-webpack, qui est actuellement un outil d'empaquetage très excellent et largement utilisé. Suivez le didacticiel officiel du webpack pour apprendre, mais le didacticiel officiel est actuellement basé sur webpack3 et l'utilisation réelle est webpack4. Il existe actuellement de grandes différences, et j'ai également fait quelques résumés ici pour faciliter. examen et étude futurs.

Le concept de webpack

Webpack est un outil de compilation statique (pré-compilation) [bundle de modules statiques], qui est différent de seaJs et requireJS (compilation en ligne), similaire à la différence entre javac et jit
Plusieurs concepts dans webpack

Entrée

Fichier d'entrée, entrée compilée par webpack, trouvailles de webpack all La racine dépendante finira par associer toutes les dépendances

output

Modifier l'emplacement de sortie du résultat (bundles), et comment pour nommer les résultats de sortie, etc.

loader

webpack est utilisé pour traiter divers fichiers, le chargeur peut traiter et utilisez Tous les fichiers introduits par import (théoriquement). Le chargeur doit être configuré dans module.rules. Il a deux attributs obligatoires : test (quels fichiers traiter) et use (quel chargeur utiliser). Si la configuration est incorrecte, webpack signalera une erreur

plugin

Le plugin est utilisé pour gérer diverses tâches. Sa portée et son rôle sont plus grands que ceux du chargeur. Lorsque vous l'utilisez, vous devez l'utiliser. require() pour l'introduire et l'ajouter aux plugins. Si vous utilisez le plug-in plusieurs fois à des fins différentes, vous devez utiliser new pour initialiser le plug-in

Séparation de deux environnements

Le plug-in webpack.DefinePlugin est utilisé dans webpack3 pour réaliser la séparation des différents environnements : développement et production

new webpack.DefinePlugin({
    //许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容
     // 在webpack4中mode会自动设置该信息，废弃该配置
    "process.env.NODE_ENV": JSON.stringify("development")
})

Copier après la connexion

L'utilisation de cette méthode dans webpack4 n'est plus valide et vous devez utiliser le mode nouvellement fourni pour spécifier un environnement différent.
Le mode est divisé en développement et production, et un doit être défini, sinon un message d'erreur sera signalé.

// 环境设置，webpack4必须有该值，使用该属性来设置不同的环境，目前有development和production两种，也可以使用：--mode development设置
// process.env.NODE_ENV会被该设置覆盖
mode:"development",

Copier après la connexion

Trois cartes sources

utilisent eval par défaut dans webpack4. Vous pouvez modifier les paramètres par défaut en définissant devtool : "inline-source-map". Il est recommandé d'utiliser "source-map" dans l'environnement de production

Séparation de quatre codes

4.1 Séparation CSS, etc.

Utilisez le plugin extract-text-webpack- plugin pour séparer la séparation CSS et JS. Exemple officiel :
https://doc.webpack-china.org...
Les paramètres spécifiques sont les suivants :

// 将CSS分离 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在单独使用style-loader
config.module:{
     rules:[
      {
        test:/\.css$/,
        use : ExtractTextPlugin.extract({
            fallback : "style-loader",
            //这样使用会出现url()解析路径错误的问题
            //use : "css-loader"
            //使用该方式解决url()路径问题
            use:[
                {
                    loader:"css-loader",
                    options:{
                        //用于解决url()路径解析错误
                        url:false,
                        minimize:true,
                        sourceMap:true
                    }
                }
                ]
            })
        },  
    ]
}

Copier après la connexion

4.2 Diviser le module commun

Depuis que CommonChunkPlugin est obsolète par webpack4, qui recommande d'utiliser SplitChunkPlugin pour extraire les modules publics. Puisque le site officiel du webpack (https://webpack.js.org) devrait..., l'introduction des informations en ligne n'est pas très détaillée. Sur la base des résultats de la recherche en ligne, la séparation des modules publics a finalement été réalisée, mais il y en a. Il reste encore beaucoup de questions qui ne sont pas résolues. Il reste encore à trouver des informations pertinentes.
Vous pouvez vous référer à l'exemple officiel : https://github.com/webpack/we...
La configuration spécifique est la suivante :
Il existe deux façons d'utiliser SplitChunkPlugin :
1. Optimisation .splitChunks

optimization: {
        //提取公共模块，webpack4去除了CommonsChunkPlugin，使用SplitChunksPlugin作为替代
        //主要用于多页面
        //例子代码 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
        //SplitChunksPlugin配置，其中缓存组概念目前不是很清楚
        splitChunks: {
            // 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
            chunks: "all",
            // 表示在压缩前的最小模块大小，默认为0；
            minSize: 30000,
            //表示被引用次数，默认为1
            minChunks: 1,
            //最大的按需(异步)加载次数，默认为1；
            maxAsyncRequests: 3,
            //最大的初始化加载次数，默认为1；
            maxInitialRequests: 3,
            // 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；设置ture则使用默认值
            name: true,
            //缓存组，目前在项目中设置cacheGroup可以抽取公共模块，不设置则不会抽取
            cacheGroups: {
                //缓存组信息，名称可以自己定义
                commons: {
                    //拆分出来块的名字,默认是缓存组名称+"~" + [name].js
                    name: "test",
                    // 同上
                    chunks: "all",
                    // 同上
                    minChunks: 3,
                    // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
                    enforce: true,
                    //test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
                    test:""
                },
                //设置多个缓存规则
                vendor: {
                    test: /node_modules/,
                    chunks: "all",
                    name: "vendor",
                    //表示缓存的优先级
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

Copier après la connexion

Le deuxième type : new webpack.optimize.SplitChunksPlugin
La configuration spécifique est la même que celle d'optimisation.splitChunks

Cinq remplacements à chaud

Utilisez la configuration suivante pour implémenter :
Utilisez la configuration suivante dans webpack3

//查看要修补(patch)的依赖,被optimization.namedModules代替，development模式下默认开启，显示模块的相对路径
new webpack.NamedModulesPlugin(),
// 热替换插件
new webpack.HotModuleReplacementPlugin(),

Copier après la connexion

Dans webpack4, le NamedModulesPlugin a été défini comme paramètre par défaut et sera automatiquement activé en mode développement, il n'est donc pas nécessaire de configurer ceci

Six Tree Shaking

webpack4 n'utilise pas Tree Shaking en mode développement et n'est activé qu'en mode production. Vous pouvez utiliser uglifyjs-webpack-plugin pour compresser le code obscurci

7 Chargement paresseux

Utilisez import() pour introduire les modules requis. Cette partie est appelée dans la méthode, pas au début de. js.
Il est recommandé d'utiliser l'implémentation de chargement différé fournie avec Vue, React et d'autres frameworks

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!