Dateien bündeln und an den angegebenen Speicherort im Webpack laden (ausführliches Tutorial)

Im Folgenden werde ich Ihnen eine Methode zum Packen von Webpacks und zum Laden von Dateien an einen bestimmten Speicherort vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Das Beste an der Verwendung von Webpack zum Verpacken ist, dass Sie Dateien direkt anfordern können, aber dies

bringt auch ein Problem mit sich, das heißt, alle Dateien werden zusammen integriert, sodass dieses Paket zu groß ist .

Basierend darauf: Werfen wir einen Blick auf die Verpackung von Webpack (hauptsächlich wie wir die Inhaltsmodule, die wir benötigen, separat verpacken,

Und Speichern Sie es gemäß dem Speicherpfad, den wir selbst festgelegt haben.)

Zuerst gibt der Eintrag in der Datei webpack.config.js

Export der Eintragsfunktion an, welche gepackt werden müssen Separat in ein js-Paket:

entry: {
  main: path.resolve(__dirname,'src/index.js'),
  jq: ['jquery'],
  react: ['react'],
  redom: ['react-dom']
},
output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
plugin: [
  new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]

Konfigurieren Sie wie oben, sodass beim Generieren der Datei die drei js js jq.js, sellers.js und redom.js hinzugefügt werden in das dist-Verzeichnis.

Das oben Gesagte löst das Problem, dass wir mehrere Pakete verpacken.

Keine Sorge, hier ist was Die spezifische Implementierung von

ist wie folgt (eigentlich liegt der Unterschied hauptsächlich in der Eingabefunktion):

entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },

Wie oben gezeigt, werden die vier js in den vier Dateien unter dist we gespeichert Ordner formuliert haben. (Hinweis: Derzeit besteht keine

Notwendigkeit, das webpack.optimize.CommonsChunkPlugin-Plugin zu verwenden)

Fügen Sie abschließend die linken und rechten webpack.config.js-Codes ein:

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },
 output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
 module: {
  loaders: [
   {
    test: /\.scss$/,
    loader: 'style!css!sass'
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
    loader: 'babel'
   },
   {
    test: /\.(png|jpg|gif)$/,
    loader: 'url?limit=40000'
   }
  ]
 },
 babel: {
  presets: ['es2015','stage-0','react'],
  plugins: ['transform-runtime',["antd",{"style": "css"}]]
 },
 resolve: ['js','jsx','css'],
 plugins:[
  new webpack.ProvidePlugin({
   $:"jquery",
   jQuery:"jquery",
   "window.jQuery":"jquery"
  })
 // new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
 // new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
 // new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
 ]
};

Ich habe es oben für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie EventBus in Vue, um eine Kommunikation zwischen Komponenten auf derselben Ebene zu erreichen

So implementieren Sie die automatische Kommunikation in vue2.0 Definieren Sie die Kreisdiagrammkomponente (Echarts)

So implementieren Sie einen Slot in Vue, um die von der übergeordneten Komponente übergebene Vorlage in der untergeordneten Komponente anzuzeigen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDateien bündeln und an den angegebenen Speicherort im Webpack laden (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!