webpack 打包 --- js and es6

一. 打包JS

webpack最简单的用法，声明一个入口以及出口即可，entry为入口，output为出口 

const path = require('path');
const config = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    }
};

module.exports = config;

 

二. 打包ES6

1.打包es6需要先安装一个编译器解析es6语法，这里使用bable：npm i --save-dev babel-loader babel-core

2.安装完之后需要在webpack的配置里去调用编译器

3.可以指定编译的规范，以env或者ES2015或者2016等规范打包，还可以按浏览器的环境等打包

   这里使用babel-preset-env转换语法，先安装：npm i babel-preset-env --save-dev

const path = require('path');
const config = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,  // js结尾的文件，使用以下编译器
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ // 指定打包规范，这里是兼容占有率1%以上的浏览器
                            ['babel-preset-env', {
                            targets: {
                                browsers: ['> 1%']
                            }
                            }]
                        ]
                    }
                },
                exclude: '/node_modules/'
            }
        ]
    }
};

module.exports = config;

转换新浏览器的函数以及方法，这里分成两种转换方式，一种是全局垫片 -  babel-polyfill，会在全局环境进行转换。另一种是局部垫片，不会污染全局环境 ;

1. babel-polyfill    安装： npm i babel-polyfill --save

    使用：import 'babel-polyfill'   //  只需要引用了就行，方法会自动转换