Comment utiliser Webpack pour traiter des fichiers

Cette fois, je vais vous montrer comment faire fonctionner webpacktraiter des fichiers, et quelles sont les précautions pour faire fonctionner webpack pour traiter des fichiers. Voici un cas pratique, jetons un coup d'oeil. .

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 , alors ce sac 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')
 ]
};

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment Webpack introduit dynamiquement les fichiers

Emballez des fichiers à l'aide du webpack React de CDN

Comment créer une barre de progression circulaire dans le mini programme WeChat

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!