webpack-使用babel-loader转化ES6代码

来源：互联网发布：马克斯cms x站编辑：程序博客网时间：2024/06/05 15:07

整个文件目录：
这里写图片描述
在webpack.config.js中需要配置以下代码：

module: {    loaders: [        {            test: /\.js$/,            loader: 'babel-loader',            option: {                'presets': [latest],            }        }   ]}

然后必须安装babel-loader

npm install --save-dev babel-loader babel-core

因为配置了presets
所以需要在命令行安装

npm install --save-dev babel-preset-latest

全部代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');module.exports = {    //文件入口    entry: './src/app.js',    //文件出口    output: {        path: __dirname + '/dist/',       //打包后的路径        filename: 'js/[name].bundle.js'    },    module: {        loaders: [            {                test: /\.js$/,                loader: 'babel-loader',                //打包除这个文件之外的文件                exclude: path.resolve(__dirname,"./node_modules"),                //打包包括的文件                include: path.resolve(__dirname, "./src"),                options: {                    'presets': ['latest']                }            }        ]    },    plugins: [        //自动生成index.html文件        new htmlWebpackPlugin({            filename: 'index.html',            template: "index.html"        })    ]}

4 0