In diesem Artikel wird hauptsächlich die korrekte Haltung von Webpack zum Extrahieren von Bibliotheken von Drittanbietern vorgestellt. Es gibt zwei häufig verwendete Methoden zum Extrahieren von Bibliotheken von Drittanbietern. In diesem Artikel können Interessierte mehr erfahren >
Wenn wir Webpack zum Packen verwenden, möchten wir häufig die Bibliothek eines Drittanbieters separat extrahieren, sie als stabile Versionsdatei verwenden und den Browser-Cache verwenden, um die Anzahl der Anforderungen zu reduzieren. Es gibt zwei häufig verwendete Methoden zum Extrahieren von Bibliotheken von Drittanbietern
CommonsChunkPlugin-Methodeneinführung
Nehmen wir Vue als Beispielconst vue = require('vue') { entry: { // bundle是我们要打包的项目文件的导出名字, app是入口js文件 bundle: 'app', // vendor就是我们要打包的第三方库最终生成的文件名,数组里是要打包哪些第三方库, 如果不是在node——modules里面,可以填写库的具体地址 vendor: ['vue'] }, output: { path: __dirname + '/bulid/', // 文件名称 filename: '[name].js' }, plugins: { // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数 // 打包之后就生成vendor.js文件 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') } }
<script src="/build/vendor.js"></script> <script src="/build/bundle.js"></script>
DLLPlugin-Methode Einführung
Bereiten Sie zunächst zwei Dateien vorconst webpack = require('webpack') const library = '[name]_lib' const path = require('path') module.exports = { entry: { vendors: ['vue', 'vuex'] }, output: { filename: '[name].dll.js', path: 'dist/', library }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, 'dist/[name]-manifest.json'), // This must match the output.library option above name: library }), ], }
const webpack = require('webpack') module.exports = { entry: { app: './src/index' }, output: { filename: 'app.bundle.js', path: 'dist/', }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./dist/vendors-manifest.json') }) ] }
$ webpack --config webpack.dll.config.js $ webpack --config webpack.config.js
<script src="/dist/vendors.dll.js"></script> <script src="/dist/app.bundle.js"></script>
So verwenden Sie Webpack+Express, um die Entwicklung mehrseitiger Websites zu implementieren
Webpack-Framework (Beherrschung der Kerntechnologie)
So steuern Sie mehrere Bildlaufleisten, um mithilfe von JS synchron zu scrollen
Vue verwenden – So erstellen Sie Vue mit CLI+Webpack
Das obige ist der detaillierte Inhalt vonSo extrahieren Sie Bibliotheken von Drittanbietern mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!