Explication détaillée des paramètres basés sur webpack.config.js

Ci-dessous, je partagerai avec vous une explication détaillée des paramètres basés sur webpack.config.js, qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Le fichier webpack.config.js est généralement placé dans le répertoire racine du projet, et il est lui-même également un module de spécification Commonjs standard.

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:  /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

1.entry

l'entrée peut être une chaîne, un tableau ou un objet.

Lorsque l'entrée est une chaîne, elle est utilisée pour définir le fichier d'entrée :

entry: './js/main.js'

Lorsque l'entrée est un tableau, elle contient également le fichier js d'entrée. Un autre paramètre peut être utilisé pour. Configurez un serveur de ressources statiques fourni par webpack, webpack-dev-server. webpack-dev-server surveillera les modifications apportées à chaque fichier du projet, le construira en temps réel et actualisera automatiquement la page :

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

Lorsque l'entrée est un objet, nous pouvons créer différents fichiers dans différents fichiers. , utilisez-le selon vos besoins, par exemple, introduisez simplement hello.js dans ma page hello :

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

2.output

Le Le paramètre de sortie est un objet utilisé pour définir la sortie du fichier construit. Il contient le chemin et le nom du fichier :

 output: {
  path: './build',
  filename: 'bundle.js'
 }

Lorsque nous définissons la construction de plusieurs fichiers dans l'entrée, le nom du fichier peut être modifié en conséquence en [nom].js est utilisé pour définir les noms des différents fichiers une fois qu'ils sont construit.

3.module

Concernant le chargement des modules, nous le définissons dans module.loaders. Ici, les expressions régulières sont utilisées pour faire correspondre les noms de fichiers avec différents suffixes, puis différents chargeurs sont définis pour eux. Par exemple, définissez trois chargeurs en série pour moins de fichiers (! Utilisé pour définir des relations en cascade) :

module: {
 loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
 ]
}

De plus, vous pouvez également ajouter des ressources d'image telles que png et jpg lorsqu'elles sont inférieures à 10k Loader qui traite automatiquement les images base64 :

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

Après avoir ajouté des chargeurs aux css, less et images, nous pouvons non seulement exiger des fichiers js comme dans node, nous pouvons également exiger du css, less Même des fichiers image :

 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

Mais ce que vous devez savoir, c'est que les fichiers requis de cette manière seront intégrés dans le bundle js. Si nous devons conserver la méthode d'écriture require et que nous souhaitons supprimer le fichier CSS séparément, nous pouvons utiliser le plug-in [extract-text-webpack-plugin] mentionné ci-dessous.

Dans les premiers chargeurs configurés dans l'exemple de code ci-dessus, nous pouvons voir un chargeur appelé React-Hot. Mon projet est utilisé pour apprendre à réagir et à écrire des codes associés, j'ai donc configuré un chargeur de réaction à chaud, grâce auquel je peux implémenter le remplacement à chaud des composants de réaction. Nous avons configuré webpack/hot/only-dev-server dans le paramètre d'entrée, nous n'avons donc besoin que d'activer le paramètre --hot lors du démarrage du serveur de développement webpack pour utiliser React-hot-loader. Définissez-le comme ceci dans le fichier package.json :

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

4.resolve

webpack procédera en fonction du répertoire lors de la construction le package Pour rechercher des fichiers, le tableau extensions dans l'attribut solve est utilisé pour configurer quels suffixes de fichiers le programme peut compléter tout seul :

 resolve:{
  extensions:['','.js','.json']
 }

Ensuite, lorsque nous voulons charger un fichier js, il suffit de require( 'common') Le fichier common.js peut être chargé.

6.externals

Lorsque nous voulons exiger d'autres bibliothèques de classes ou API dans le projet, mais que nous ne voulons pas que ces bibliothèques de classes le code source est intégré aux fichiers d'exécution, ce qui est nécessaire au développement réel. À ce stade, nous pouvons résoudre ce problème en configurant le paramètre externals :

 externals: {
  "jquery": "jQuery"
 }

Pour que nous puissions utiliser ces API dans le projet en toute confiance : var jQuery = require("jquery");

7.context

Lorsque nous avons besoin d'un module, si nous incluons des variables dans require, comme ceci :

require("./mods/" + name + ".js");

Ensuite, nous ne peut pas connaître le module spécifique lors de la compilation. Mais à ce moment-là, webpack fera également un travail d'analyse pour nous :

1. Répertoire d'analyse :

. 2. Extrayez l'expression régulière : '/^.*.js$/';

Donc à ce moment, afin de mieux coopérer avec wenpack pour la compilation , on peut lui donner Il précise le chemin, tout comme ce qui se fait dans cake-webpack-config (on ignore ici le rôle de abcoption) :

 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

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

Articles connexes :

ajax+springmvc implémente la méthode d'échange de données entre C et View

Front-end et back-end Spring MVC 5 Méthode d'interaction Ajax

Code de vérification Ajax pour une implémentation en double

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!