Vue-Studiennotizen (1) – Webpack-Studie

Bevor Sie Vue lernen, lernen Sie zunächst das Front-End-Verpackungstool kennen - Webpack. In diesem Artikel können interessierte Freunde einen Blick darauf werfen.

Vor kurzem wurde Vue im Projekt verwendet. und ich habe schon lange von seinem Namen gehört, aber ich weiß sehr wenig darüber, also habe ich diese Gelegenheit genutzt, um mehr über Vue zu erfahren.
Bevor ich Vue lernte, lernte ich zunächst das Front-End-Verpackungstool Webpack, das derzeit ein sehr hervorragendes und weit verbreitetes Verpackungstool ist. Befolgen Sie zum Lernen das offizielle Webpack-Tutorial, aber das offizielle Tutorial basiert derzeit auf Webpack3 und die tatsächliche Verwendung ist derzeit Webpack4. Zur Vereinfachung habe ich hier auch einige einfache Zusammenfassungen erstellt zukünftige Überprüfung und Studie.

Das Konzept von Webpack

Webpack ist ein statisches Kompilierungstool (Vorkompilierung) [statisches Modulpaket], das sich von SeaJs und RequireJS (Online-Kompilierung) unterscheidet, ähnlich dem Unterschied zwischen javac und jit
Mehrere Konzepte im Webpack

• Eintrag

Eintragsdatei, Webpack-kompilierter Eintrag, Webpack-Funde all Der abhängige Stamm verknüpft schließlich alle Abhängigkeiten

• Ausgabe

Ausgabeort des Ergebnisses (Bundles) bearbeiten und wie um die Ausgabeergebnisse usw. zu benennen.

• Loader

Webpack wird zum Verarbeiten verschiedener Dateien verwendet, die der Loader verarbeiten kann und verwenden Sie alle durch den Import eingeführten Dateien (theoretisch). Der Loader muss in module.rules konfiguriert werden. Er verfügt über zwei erforderliche Attribute: test (welche Dateien verarbeitet werden sollen) und use (welcher Loader verwendet werden soll). Wenn die Konfiguration falsch ist, meldet Webpack einen Fehler

• Plugin

Der Umfang und die Rolle des Plugins sind größer als bei der Verwendung require(), um es einzuführen und in Plugins hinzuzufügen. Wenn Sie das Plug-in mehrmals für unterschiedliche Zwecke verwenden, müssen Sie new verwenden, um das Plug-in zu initialisieren.

Trennung zweier Umgebungen

Das webpack.DefinePlugin-Plug-in wird verwendet webpack3 zur Trennung verschiedener Umgebungen: Entwicklung und Produktion

Die Verwendung dieser Methode in webpack4 ist nicht mehr gültig und Sie müssen den neu bereitgestellten Modus verwenden, um eine andere Umgebung anzugeben.

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

Der Modus ist in Entwicklung und Produktion unterteilt und muss festgelegt werden, andernfalls wird eine Fehlermeldung gemeldet.

Drei Quellkarten

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

verwenden standardmäßig eval in webpack4. Sie können die Standardeinstellungen ändern, indem Sie devtool: „inline-source-map“ festlegen. Es wird empfohlen, „source-map“ in der Produktionsumgebung zu verwenden

Vier-Code-Trennung

4.1 CSS usw. trennen.

Verwenden Sie das Plugin extract-text-webpack- Plugin zur Trennung von CSS und JS. Offizielles Beispiel:

https://doc.webpack-china.org...

Die spezifischen Einstellungen lauten wie folgt:

4.2 Gemeinsames Modul aufteilen

// 将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
                    }
                }
                ]
            })
        },  
    ]
}

Da CommonChunkPlugin von Webpack4 veraltet ist, wird die Verwendung von SplitChunkPlugin zum Extrahieren öffentlicher Module empfohlen. Da die offizielle Webpack-Website (https://webpack.js.org) ... sein sollte, ist die Online-Informationseinführung nicht sehr detailliert. Basierend auf den Online-Suchergebnissen wurde die Trennung öffentlicher Module endlich erreicht, aber es gibt sie Es sind noch viele Fragen offen, die noch nicht geklärt sind. Es müssen noch relevante Informationen gefunden werden.

Sie können sich auf das offizielle Beispiel beziehen: https://github.com/webpack/we...

Die spezifische Konfiguration ist wie folgt:
Es gibt zwei Möglichkeiten, SplitChunkPlugin zu verwenden:

1. Optimierung .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
                }
            }
        }
    }

Der zweite Typ: neues webpack.optimize.SplitChunksPlugin

Die spezifische Konfiguration ist die gleiche wie Optimierung.splitChunks
Fünf Hot Replacement

Verwenden Sie zur Implementierung die folgende Konfiguration:

Verwenden Sie die folgende Konfiguration in Webpack3

In Webpack4 wurde das NamedModulesPlugin als Standardeinstellung festgelegt und wird im Entwicklungsmodus automatisch aktiviert, sodass keine Konfiguration erforderlich ist

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

Six Tree Shaking

webpack4 verwendet Tree Shaking nicht im Entwicklungsmodus und ist nur im Produktionsmodus aktiviert. Sie können uglifyjs-webpack-plugin verwenden, um verschleierten Code zu komprimieren

7 Lazy Loading

Verwenden Sie import(), um die erforderlichen Module einzuführen. Dieser Teil wird in der Methode aufgerufen, nicht am Anfang js.

Es wird empfohlen, die Lazy-Loading-Implementierung zu verwenden, die mit Vue, React und anderen Frameworks geliefert wird

Das obige ist der detaillierte Inhalt vonVue-Studiennotizen (1) – Webpack-Studie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!