安装webpack编译

npm init

npm install -g webpack

npm install babel-loader --save-devnpm install babel-preset-es2015 --sava-dev //安装转码规则


在源代码目录创建 webpack.config.js 文件,内容如下:

var path = require('path'); //加载nodejs的路径处理模块module.exports = {

    entry: './es6/index.js',

    output: {

        path: __dirname,        //__dirname是一个nodejs变量,表示当前js文件所在的目录        filename: 'bundle.js'    },

    module: {

        loaders: [            {

                test: path.join(__dirname, 'es6'),    //配置文件目录下的es6文件夹作为js源代码文件夹,所有源代码一定要放在该文件夹下                loader: 'babel-loader' ,

                query: {

                    presets: ['es2015']                }

            }

        ]

    }

};

注意:test配置指定了哪些是ES6代码,可以指定一个文件夹,则所有源代码一定要放在该文件夹下,或者用一个 正则表达式指定哪些是ES6代码。只有ES6代码,才会编译。

最近输入webpack编译

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,542评论 7 35
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,845评论 0 21
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 8,332评论 2 16
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 5,675评论 0 1
  • 我说我怕很多 但唯独不怕失落 其实爱很多 但我知道我不能诉说 一个人的天堂里仿佛也会过些地狱般的生活 这是我的无奈...
    Naleon阅读 994评论 0 0