loader
官方解釋是文件預處理器,通俗點說就是webpack在處理靜態文件的時候,須要使用loader
來加載各類文件,好比:html
文件須要使用html-loader
,css
須要使用css-loader
、style-loader
等等。
今天咱們來認識的是 babel-loader
,用來處理ES6語法,將其編譯爲瀏覽器能夠執行的js語法。javascript
安裝
咱們須要用到 babel-loader
babel-core
babel-preset
配合版本: webpack 3.x | babel-loader 8.x | babel 7.xcss
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
使用
先來上一個小栗子:html
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: ['@babel/preset-env'], // presets設置的就是當前js的版本 plugins: [require('@babel/plugin-transform-object-rest-spread')] // plugin是須要的插件 } } } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', inject: 'body', filename: 'index.html' }) ] }
能夠使用 options 屬性 來給 loader 傳遞選項:java
node_modules/.cache/babel-loader
。(若是沒有找到node_modules將會往上一級查找)使用babel-loader可能存在的一些疑問
babel-loader 很慢!node
node_modules
,參考文檔中的 loaders 配置的 exclude
選項。cacheDirectory
選項,將 babel-loader 提速至少兩倍。 這會將轉譯的結果緩存到文件系統中。上一個本身的例子吧
// app.js 入口文件 import layer from './components/layer/layer.js'; // 這個是須要babel處理的js文件 import './common/common.css'; const app = function() { const a = '我是內容'; // ES6語法 console.log(a); // webpack 轉換後: // var a = '我是內容';\n console.log(a);\n console.log(_layer.default);\n};\n\nnew app(); console.log(layer); }; new app()
// layer.js // import tep from './layer.html'; function layer() { return { name: 'layer', template: tep }; } export default layer;
// webpack.config.js 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)/, // 優化處理加快速度 use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', inject: 'body', filename: 'index.html' }) ] }