本文小编为大家详细介绍“怎么搭建Webpack+Babel+React开发环境”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么搭建Webpack+B 香港云主机abel+React开发环境”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1.认识Webpack构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具，能够把各种文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作为模块进行编译后进行打包。2.安装Webpack要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装。3.创建一个项目安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹，当然项目名字你可以起你自己想要的名字。通过编辑器找到你刚刚所创建的项目文件夹现在我们来创建2个文件:app.jsindex.html然后在终端执行
webpack ./app.js ./dist/bundle.js最后执行启动本地的http服务python -m SimpleHTTPServer这个时候你就可以在浏览器输入:http://localhost:8000如果你能在浏览器里面看到Hello world!那说明你已经成功的利用Webpack把main.js打包并编译到了bundle.js.是不是很简单？定义一个配置文件上面的只是对Webpack的使用进行了一些简单的介绍，实际上每个项目下都应该包含一个webpack.config.js，用来告诉Webpack需要做些什么。现在在终端中运行：webpack看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样。entry：指定打包的入口文件1.单个文件打包为单个输出文件，直接写该文件的名字，例如：entry:”main.js”2.多个文件打包为单个输出文件，将文件名放进一个数组，例如：entry:[‘main.js’,’xx.js’]3.多个文件打包为多个输出文件，将文件名放入一个键字对，例如：entry: {a:’main.js’,b:’xx.js’}output：配置打包结果path为定义输出文件夹，filename为打包结果文件的名称，如果指定打包入口文件为上面的1、2种情况，filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js，filename里面的[name]为entry中的键。监听变化自动打包当我们在不停的对代码进行变动的时候，为了不修改一次然后又手动去进行打包一次。可以使用webpack的watch功能。webpack –watch 或者 webpack -w或者可以直接在配置代码里面把watch设置为true4.使用BabelBabel是什么？Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法，以便在现在有的环境执行。在终端执行:npm install webpack babel-loader babel-core babel-preset-es2015 –save-dev执行安装完成后需要将之前的webpack.config.js修改为:现在就能在文件里面以ES6的语法进行代码编写，我们来测试一下，在app.js加入:ES6支持用箭头方式来定义函数，如果你能在控制台看到“我现在在使用Babel!”的打印文字，说明我们的Babel模块安装成功，可以开始使用ES6进行代码编写了。loaders项里面表示用来加载这种类型的资源的loader。test，是一段正则，表示进行匹配的资源类型。exclude为指定应该被忽略的文件，我们在这儿指定了/node_modules/。query有2种写法, 一种是直接以字符串形式跟在loader名后：另一种如本文所示：resolve.extensions 用于指明程序自动补全识别哪些后缀,
注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.5.结合React前面我们已经对Webpack和Babel进行了配置并做了一些介绍，基本的环境已经搭建好了，现在我们开始在使用React。终端输入以下代码对react和react-dom进行安装Babel针对React的所有的预设插件由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。将module -> loaders下面的query修改如下：现在创建一个名为hello.js的文件然后将app.js里面的文件修改如下：如果你能在浏览器里面看到 “Hello, React!”，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。读到这里，这篇“怎么搭建Webpack+Babel+React开发环境”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注开发云行业资讯频道。
这篇文章给大家分享的是有关win8如何清除最近访问位置的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。清除最近访问位置步骤/方法：1.打开我的电脑，右键选择“最近访问的位置”进入。2.直接在打开的菜单中选择“清除最近使用的项目列表”进…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
