webpack打包js

webpack打包的兩種方式

1. webpack entry<entry> output （命令行）
2. webpack -config webpack.conf.js (指定webpack的配置文件)

使用命令行打包js

一：建立兩個js文件

建立app.js, sum.js，sum.js導出一個加法的函數，app.js使用這個函數。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
    return a + b;
}

二：使用webpack命令打包

在當前目錄下使用： webpack app.js bundle.js ; 這裏入口是app.js, 輸出文件是bundle.js，這樣就會看到文件中多出一個bundle.js文件。

建立一個html文件運行，引入bundle.js運行，控制檯會打印：sum(21, 22) 43 。

使用webapck的配置文件打包（仍是上面的兩個js文件）

1. 建立一個webpack.conf.js，編寫wepack的配置文件

// 配置文件使用commonjs規範

module.exports = {

    // 入口，是一個對象
    entry: {
        app: './app.js'
    },

    // 輸出
    output: {
        // 帶五位hash值的js
        filename: '[name].[hash:5].js'
    }
}

1. 在命令行輸入：webpack --config webpack.conf.js，發現生成了一個app.dd1c6.js帶hash的js文件。將這個js文件引入HTML裏面發正常輸出：sum(21, 22) 43
2. 配置文件的命名爲webpack.config.js，則直接在命令行輸入webpack就能夠。

webapck配合babel打包ES六、7

在項目根目錄安裝bable-loader和babel-core，babel-preset

1. 使用npm init生成一個配置文件
2. npm install babel-loader babel-core --save-dev
3. 新建app.js，index.html，webpack.config.js等文件
4. 編寫webpack.config.js
5. 安裝babel-preset來指定編譯的版本：npm install babel-preset-env --save-dev
6. 在app.js裏面隨便寫一些ES6的語法
7. 使用命令行輸入webpack進行編譯

webpack配置文件

// 配置文件使用commonjs規範

module.exports = {

    // 入口，是一個對象
    entry: {
        app: './app.js' // 相對路徑
    },

    // 輸出
    output: {
        // 帶五位hash值的js
        filename: '[name].[hash:8].js'
    },

    // 指定loader
    module: {

        // rules中的每一項是一個規則
        rules:[
            {
                test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
                use: {
                   loader: 'babel-loader', // 使用bable-loader來處理
                   options: {  // 指定參數
                        presets: [
                            ['babel-preset-env', {
                                targets: {
                                    browsers: ['> 1%', 'last 2 version'] //具體能夠去babel-preset裏面查看
                                } 
                            }]
                            
                        ] // 指定哪些語法編譯
                   }
                },
                exclude: '/node_module/' // 排除在外
            }
        ]
    }
}

app.js和編譯以後帶hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 將之前數組每一項*2

console.log(newArr);



// ==================//
// 編譯以後（直接截取了編譯的代碼）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
  return item * 2;
}); // 將之前數組每一項*2

console.log(newArr);

babel的兩個插件：Babel Polyfill 和 Babel Runtime Transform

用來處理一些函數和方法（Genertor,Set,Map,Array.from等未被babel處理，須要上面的兩個插件）

1. Babel Polyfill（全局墊片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
2. Babel Runtime Transform（爲開發框架準備），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
3. 新建一個.babelrc來進行配置

app.js裏面新增代碼

import "babel-polyfill";
let func = () => {};
const num = 30;  
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 將之前數組每一項*2

console.log(newArr);


// 須要babel-polyfill
arr.includes(8);

// Genertor 函數
function* func2() {

}

webpack配置

// 配置文件使用commonjs規範

module.exports = {

    // 入口，是一個對象
    entry: {
        app: './app.js' // 相對路徑
    },

    // 輸出
    output: {
        // 帶五位hash值的js
        filename: '[name].[hash:8].js'
    },

    // 指定loader
    module: {

        // rules中的每一項是一個規則
        rules:[
            {
                test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
                use: {
                   loader: 'babel-loader', // 使用bable-loader來處理
                   options: {  // 指定參數
                        
                   }
                },
                exclude: '/node_module/' // 排除在外
            }
        ]
    }
}

.babelrc文件配置

{
    "presets": [
        ["babel-preset-env", {
            "targets": {
                "browsers": ["> 1%", "last 2 version"]
            } 
        }] 
    ],
    "plugins": ["transform-runtime"]
}