频道导航

浅谈react+es6+webpack的基础配置

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了浅谈react+es6+webpack的基础配置，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_5020@这是模块化开发、主流框架和最新版的ECMAScript语法规范的一个小demo

@H5020@
准备工作

@H5020@安装 nodeJs

@H5020@首先进入node官网，去下载最新版的nodeJs

@H5020@
webpack

@H502_0@安装webpack

<div class="jb51code">
<pre class="brush:xhtml;">
npm install webpack -g

@H_502_0@参数-g表示全局安装webpack，你在cmd命令中哪个文件夹下都可以使用webpack的命令，如果不加-g的话，是只可以在你安装webpack的目录下使用webpack这个命令

@H_502_0@webpack 也有一个 web 服务器

@H_502_0@-g道理同上

@H_502_0@

配置webpack

@H_502_0@1、先确认一下项目的目录结构

@H_502_0@2、配置webpack.config.js

@H_502_0@在使用webpack的时候，需要创建一个名为 webpack.config.js 的配置文件，这个文件在安装webpack的时候，是不会自动创建的，是需要手动创建，文件的位置要放在当前安装webpack根目录下

module.exports = {
entry: path.resolve(dirname,'./app/app.js'),output: {
path: path.resolve(dirname,'./build'),filename: 'js/build.js'
},module: {
loaders: [{
test: /.js|.jsx?$/,exclude: /node_modules/,loader: 'babel-loader',query: {
presets: ['es2015','react']
}
}]
}
}

@H_502_0@这是一个简单的webpack的配置，首先先引用了path对象。

@H_502_0@entry是一个入口文件，在这个文件中的所有内容，会被打包到output指定目录的指定文件当中。

@H_502_0@path.resolve是一个来格式化路径的方法，path.resolve的方法参数有两个path.resolve(from，to)，from这里的__dirname是为了获取当前模块文件所在的目录，to这里的./app/app.js是一个相对路径，ouput是出口，ouput中的path和entry的方法同理，这里不做赘述。

@H_502_0@filename是指向一个指定文件，入口打包的所有文件，最后代码都会在这个出口文件中看到。

@H_502_0@module中添加的loaders这个数组，里面的对象是用来转换模块的，现在这里只添加了一个js的模块，用来转换es6语法和react

@H_502_0@这个时候，还需要安装一个 babel-loader

@H_502_0@npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

@H_502_0@3、修改html文件

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> React + Webpack + es6