webpack2 入門實戰 2 loader 篇

大家好我是奶綠茶
上一篇介紹到基本的 webpack2 使用
這篇來介紹 webpack 的核心功能 loader
要告訴 webpack , 遇到什麼樣的檔案, 要用什麼樣的 loader 處理
我們就以 babel-loader 來做教學
1. 安裝 babel-loader
babel-core：babel 的核心程式
babel-loader：webpack 用的 babel 轉換 loader
babel-preset-es2015：babel 轉換成相下相容的語法

npm i -s -D babel-loader babel-core babel-preset-es2015

2. webpack.config.js
所有的 loader 規則都放在 module.rules 下
test：正則比對副檔名，只要是 .js 或 .jsx 都套用這個 loader
loader：指定要套用的 loader
options:要傳給 loader 的參數
注：loader寫法有二種，寫成一行, 用 ? 當參數傳
另一種就是寫 loader , 然後用 options 傳
個人比較愛後者
include：該 loader 只要找指定的資料夾，可加速 webpack 打包
exclude：同理，只是排除資料夾

var path = require( 'path' );
module.exports = {
    context: path.join( __dirname, '/src' ),
    entry: './js/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve( __dirname, 'dist' )
    },
    module: {   //https://webpack.js.org/configuration/module/
        rules: [
            {
                test: /\.(js|jsx)$/,
                // 寫法 1, xx-loader?參數
                // loader: 'babel-loader?presets[]=es2015'
                // 寫法 2 , loader + options
                loader: 'babel-loader', 
                options: {
                    // 轉成es2015格式，支援舊的 Browser
                    presets: [ 'es2015' ], 
                },
                // 只找這個資料夾下的檔案，可以加速 webpack 打包
                // 如果要多路徑, 可以寫成 Array
                include: path.resolve( __dirname, "src/js" ),
                // 排除文件，加速 webpack 打包
                exclude: /(node_modules|bower_components)/, 
            },
        ]
    }
};

3. app.js 採用 es6 的各種新語法寫

class MyApp {
    constructor() {
        console.log('MyApp constructor');
    }
    foo() {
        console.log('foo');
    }
}

var app = new MyApp();

(() => {
    console.log('arrow function');
})();

let name = "milkmidi";
console.log(`${name} hi`);

4. 執行 webpack , 就可以看到 bundle 後的檔, 並且轉成向下相容的js 語法


轉載請註明出處
Github Source Code