Cas d'utilisation du paramètre webpack.config.js

Cette fois, je vais vous présenter un cas d'utilisation des paramètres webpack.config.js. Quelles sont les précautions lors de l'utilisation des paramètres webpack.config.js. Voici les cas pratiques, jetons un coup d'œil.

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 ou 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, il contient également le fichier js d'entrée. De plus, un paramètre peut être utilisé pour configurer 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, l'expression régulière est utilisée pour faire correspondre les noms de fichiers avec différents suffixes, puis définir différents chargeurs 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. Extraire l'expression régulière : '/^.*.js$/'

于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：

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

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

推荐阅读：

构建项目时本地ip无法访问处理方法

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!