webpack4 自學筆記一（babel的配置）

全部代碼均可以再個人github上查看，每一個文件夾下都會有README.md，歡迎star： https://github.com/Jasonwang911/webpackStudyInit/tree/master/babel

1. webpack4對UglifyJsPlugin進行了改變，在配置文件（默認爲webpack.config.js）或者package.json的執行腳本 "script"中須要指定環境，默認 mode 環境爲 production 爲壓縮代碼，配置環境中須要添加 mode: 'development', package.json中須要 --mode development 來取消壓縮代碼。

2.安裝babel：
準備環境 sudo npm install webpack webpack-cli -g 安裝後可執行 webpack 命令
安裝babel npm install @babel/core babel-loader --save-dev

3.webpack 命令
webpack entry output
webpack --config <webpack.config.js>     （默認是webpack.config.js  默認文件名不須要使用--config 指令)

4.webpack同時支持 es6 module、commonjs規範、AMD規範

es6 module 規範:

import sum from './sum';

export default function(a, b) {
    return a + b;
}

commonjs 規範

var minus = require('./minus');

module.exports = function(a, b) {
    return a - b;
}

因爲 AMD 是異步加載，因此會額外打包出文件，注意修改打包路徑

define([
    'require',
    'dependency'
], function (require, factory) {
    return function(a, b) {
        return a * b;
    }
})

require(['./muti], function(muti){
    console.log(muti(2,4))
})

　　

1、babel-loader

1. 安裝依賴 npm install @babel/core babel-loader --save-dev
2. 配置webpack配置文件

 module: {
        rules: [    
            {
                test: /\.js$/,
                use: 'babel-loader',
                // include: ['./app.js'],
                exclude: '/node_modules/'
            }
        ]
    }

　　2、babel-preset 針對語法

1. env包括 es2015/es2016/es2017/latest
   一些特殊的preset babel-preset-react
   babel-preset-stage 0-3 還未發佈的一些預設
2. 安裝 babel-preset npm install @babel/preset-env --save-dev
3. 配置文件中設置babel-preset

   module: {
        rules: [    
            {
                test: /\.js$/,
                use: {
                    loader: 'bable-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                // include: ['./app.js'],
                exclude: '/node_modules/'
            }
        ]
    }

　　

4. target 參數 根據指定的目標選擇性的進行編譯
   targets
   targets.browsers 'last 2 versions' '> 1%' 從一個開源項目 browserslist 和 can i use

    module: {
        rules: [    
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env',
                            {
                                targets: {
                                    browsers: ['> 1%', 'last 2 versions']
                                }
                            }]
                        ]
                    }
                },
                // include: ['./app.js'],
                exclude: '/node_modules/'
            }
        ]
    } 

　　

5. 在 .babelrc 文件中配置

{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["last 2 version", "not ie <= 6"]
            }
        }]
    ]
}

　　3、babel-plugin 針對函數和方法 arr.include new Set() Generator Map Array.from Array.prototype.includes 這些方法都沒有被babel處理，因此使用babel的插件來處理

1. babel-polifill 全局墊片，打包後代碼量大，影響全局,適合產品開發
   安裝： npm install babel-polyfill --save
   在入口文件中使用: import 'babel-polyfill'

2. babel-runtime-transform 局部墊片，打包後代碼量少，不污染全局，適合開發插件
   安裝： npm install @babel/plugin-transform-runtime --save-dev
   npm install @babel/runtime --save     

{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["last 2 version", "not ie <= 6"]
            }
        }]
    ],
    "plugins": ["@babel/transform-runtime"]
}