So verwenden Sie Dateipräprozessoren in Projekten

Dieses Mal zeige ich Ihnen, wie Sie den Dateipräprozessor im Projekt verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Dateipräprozessors im Projekt gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Installation

Wir müssen den Babel-Loader Babel-Core Babel-Preset verwenden

Kompatible Version: 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

Verwenden Sie

Beginnen wir mit einer kleinen Kastanie:

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'
    })
  ]
}

kann das Optionsattribut verwenden, um Optionen an den Loader zu übergeben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Node erstellt ein personalisiertes Befehlszeilentool

JS-Array-Deduplizierung numerischer Typen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Dateipräprozessoren in Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!