Comment utiliser Webpack pour traiter des fichiers

php中世界最好的语言
Libérer: 2018-03-17 15:31:02
original
2306 Les gens l'ont consulté

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')
]
Copier après la connexion

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']
 },
Copier après la connexion

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')
 ]
};
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal