Comment utiliser les préprocesseurs de fichiers dans les projets

Cette fois, je vais vous montrer comment utiliser le préprocesseur de fichier dans le projet, et quelles sont les précautions d'utilisation du préprocesseur de fichier dans le projet. Ce qui suit est un cas pratique, jetons un coup d'œil.

Installation

Nous devons utiliser babel-loader babel-core babel-preset

Version compatible : webpack 3.x | .x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x

Utiliser

Commençons par un petit marron :

var htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // (不处理node_modules 和 bower_components下的js文件) 优化处理加快速度
        use: {
          loader: 'babel-loader',
          options: {     // options选项中的presets设置的就是当前js的版本
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html',
      inject: 'body',
      filename: 'index.html'
    })
  ]
}

Vous pouvez utiliser l'attribut options pour transmettre des options au chargeur.

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 :

Node crée un outil de ligne de commande personnalisé

Déduplication de tableau de type numérique JS

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!