利用webpack配置ES6语法的运行环境(包括react)

  1. 安装webpackcnpm install webpack --save-dev
    • 如果要利用npm命令来执行webpack,需要在npm生成的package.json文件中指明命令:
        "scripts":{
            "start":"webpack --config webpack.config.js"
        }
    
  2. 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法,和es2015语法就会报错cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
  3. webpack中的配置如下
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:[
                    'node_modules'
                ],
                loader:'babel-loader',
                options:{
                    presets:['es2015','react']
                }
            }
    
        ]
    },
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,237评论 7 35
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,886评论 31 98
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,501评论 2 71
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • 你在灯火绚烂的都市 我在春花繁复的乡村 记否,我们偶遇在云南 一抹柔润的唇膏融化了彼此 那一刻,丽江更浪漫温柔 玉...
    缘木摄影阅读 234评论 0 0