Heim > Artikel > Web-Frontend > 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!