webpack之小白从零开始

首先webpack已经更新到4.x 但是小白学力有限，依然使用3.X，原因是资料文档较为充足，方便学习

默认已经安装好node.js 以及 npm install babel-loader --save-dev 安装相关依赖 

//创建一个webpack.config.js文件
module.exports = {
//入口文件
    entry:{
        app: 'app.js'
    },
//出口文件
    output:{
        filename: '[name].[hash:5].js'
    }
}

通过以上代码 我们可以轻松的完成一次JS的打包

当我们的项目里用到了ES6及以上代码 我们需要再添加一些东西

//创建一个webpack.config.js文件
module.exports = {
//入口文件
    entry:{
        app: 'app.js'
    },
//出口文件
    output:{
        filename: '[name].[hash:5].js'
    }
}
module: {
    //规则    
    rules: [
        {
            //检测到js文件 使用babel-loader 编译其中ES6代码
            test: /\.js$/,
            use: 'babel-loader'
            //除了这个文件下的JS文件
            exclude: 'node_module' 
        }
    ]
}

ES6的规范在不同的浏览器下 支持的不同 这个时候我们需要npm install babel-preset-env --save 借助这个插件来帮助我们 让我们按条件 编译JS代码

module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].[hash:8].js'
    },
    module: {
        rules: [
            {
             test: /\.js$/,
             use: {
                loader: 'babel-loader',
                options: {
                    //指定编译环境 【依赖，编译的平台】
                    presets: [
                        ['babel-preset-env',{
                            // 目标
                            targets: {
                                browsers: ['>1%','last 2 versions']
                            } 
                            
                        }]
                    ]
                }
             },
             exclude: '/node_module'   // exclude: '/node_module' //该文件下JS不用检测
            }]
    }
}

当我们编写ES6代码时。通过babel-loader可以完成ES6语法到ES5语法的转换，但是ES6新的API确实无法转换的 举个例子Generator函数 new Set()数据结构 这个时候我们需要再次借助'垫片'插件，帮助我们将ES6API顺利转换浏览器可识别的ES5语法

关于“垫片的知识” 希望你先进去了解 https://segmentfault.com/a/1190000008706628

npm install babel-polyfill --save 

//在app.js 中 ES6 调用
import 'babel-polyfill'

//尽情书写ES6代码
let func = () => {}
let a = 45
let arr = [1,2,3]
let arrx = arr.map( item => item * 2)

console.log(new Set(arrx))

function* func () {}

babel-polyfill 编译的语法 会以全局对象的方式 当我们使用了Vue或Reac的等框架时就不合适了 所以我们需要借助其他插件

npm install babel-plugin-transform-runtime --save-dev 

npm install babel-runtime --save

//新建.babelrc 文件
{
    //从刚刚的app.js文件中拷贝这段代码 并且写成JSON的格式
    "presets": [
        ["@babel-preset-env",{
            "browsers": ["last 2 versions"]    
        }]        
    ],
        
    //这是我们新引入的垫片
    "plugins": ["transform-runtime"]
}

未完待续~