So bedienen Sie Webpack zum Verarbeiten von Dateien

Dieses Mal zeige ich Ihnen, wie Sie Webpack bedienenDateien verarbeiten und welche Vorsichtsmaßnahmen es gibt, um Webpack zum Verarbeiten von Dateien zu verwenden. Schauen wir uns das hier an .

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 , dann ist diese Tasche zu groß.

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 jq.js, sellers.js und redom.js hinzugefügt werden dist-Verzeichnis. js

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

Was sollten wir dann tun, wenn wir die gepackten js an einem bestimmten Ort speichern möchten? Das Folgende ist die spezifische Implementierung von

(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 von uns jeweils formulierten Einstellungen gespeichert . Vier Ordner unter dist sind enthalten. (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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Webpack Dateien dynamisch einführt

Dateien mit CDNs React Webpack packen

So erstellen Sie einen kreisförmigen Fortschrittsbalken im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Webpack zum Verarbeiten von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!