Regroupez et chargez les fichiers à l'emplacement spécifié dans le webpack (tutoriel détaillé)

Ci-dessous, je vais partager avec vous une méthode de packaging Webpack et de chargement de fichiers vers un emplacement spécifié. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

La meilleure chose à propos de l'utilisation de Webpack pour l'emballage est que vous pouvez directement exiger des fichiers, mais cela

pose également un problème, c'est-à-dire que tous les fichiers sont intégrés ensemble, donc ce package est trop gros .

Basé sur ceci : Jetons un coup d'œil à l'emballage du webpack (principalement comment emballer les modules de contenu dont nous avons besoin séparément,

Et stockez-le selon le chemin de stockage que nous nous sommes fixé)

Tout d'abord, dans le fichier webpack.config.js

la fonction d'entrée d'entrée export indique lesquels doivent être empaquetés séparément Dans un package js :

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')
]

Configurez comme ci-dessus, de sorte que lorsque le fichier est généré, jq.js, supplier.js et redom.js soient ajoutés au dist directory.js

Ce qui précède résout le problème de l'emballage de plusieurs packages ;

Alors, que devons-nous faire si nous voulons stocker les js empaquetés dans un emplacement spécifié ? ce qui suit est l'implémentation spécifique de

(en fait la différence réside principalement dans la fonction de saisie) :

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

Comme indiqué ci-dessus, les quatre js seront stockés dans les paramètres que nous avons formulés respectivement . Quatre dossiers sous dist sont inclus. (Remarque : pour le moment, il n'est pas

nécessaire d'utiliser le plug-in webpack.optimize.CommonsChunkPlugin)

Enfin, collez les codes webpack.config.js gauche et droit :

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')
 ]
};

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser eventBus dans vue pour réaliser une communication entre des composants de même niveau

Comment implémenter une communication automatique dans vue2.0 Définir le composant camembert (Echarts)

Comment implémenter slot dans vue pour afficher le modèle passé par le composant parent dans le composant enfant (tutoriel détaillé)

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!