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打包ES6、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"]
}