Tutoriel sur l'utilisation des paramètres webpack.config.js

Cette fois, je vais vous apporter un tutoriel sur la façon d'utiliser les paramètres webpack.config.js. Quelles sont les précautions d'utilisation des paramètres webpack.config.js ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 It précise le chemin, comme cela a été fait dans cake-webpack-config (on ignore le rôle de abcoption ici) :

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Linux重复加载 .vimrc文件

vue-cli+webpack无法新建项目

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!