Webpack+Babel+React环境搭建

    xiaoxiao2025-09-30  38

    前言

    我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架,如 gulp+webpack,准确的说这不是一个框架,只是项目组织的形式而已。

    Webpack+Babel+React环境搭建

    安装Webpack

    关于Webpack的介绍这里不讲解,大家可以看之前的讲解webpack介绍。

    npm install webpack -g 1 1

    创建一个项目

    创建一个名叫learn-webpack项目,并进去项目目录。

    mkdir learn-webpack cd learn-webpack 12 12

      接下来我们来创建2个文件:app.js和index.html,我们在也没上输出一个”Hello World”,  app.js:

    document.querySelector('#app').innerHTML = 'Hello World!'; 1 1

    index.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn-webpack</title> </head> <body> <div id="app"></div> <script src="dist/bundle.js"></script> </body> </html> 1234567891011 1234567891011

    然后在终端执行如下命令:

    webpack ./app.js ./dist/bundle.js 1 1

    最后执行启动本地的http服务,我们这里用Python:

    python -m SimpleHTTPServer 1 1

    然后我们访问:http://localhost:8000就可以看到效果了。

    webpack文件配置

    实际上每个项目下都应该包含一个webpack.config.js,用来告诉Webpack需要做些什么,这个我们之前文章也说过。

    module.exports = { entry: "app.js", output: { path: __dirname+"/dist", filename: "bundle.js" } } 1234567 1234567

    接下来我们在终端运行命令,看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样呢,答案是肯定的。

    webpack 1 1

    注: entry:指定打包的入口文件

    单个文件打包为单个输出文件,直接写该文件的名字,例如:entry:”main.js”多个文件打包为单个输出文件,将文件名放进一个数组,例如:entry:[‘main.js’,’xx.js’]多个文件打包为多个输出文件,将文件名放入一个键字对,例如:entry: {a:’main.js’,b:’xx.js’} output:配置打包结果  path为定义输出文件夹,filename为打包结果文件的名称,如果指定打包入口文件为上面的1、2种情况,filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js,filename里面的[name]为entry中的键。

    监听变化自动打包

    当我们在不停的对代码进行变动的时候,为了不修改一次然后又手动去进行打包一次,可以使用webpack的watch功能。这也算是webpack的一个黑科技,以前做后端的时候必须重新部署,这个是很蛋疼的。

    webpack --watch 或者 webpack -w 1 1

    或者我们可以直接在配置代码里面把watch设置为true。

    module.exports = { entry: "app.js", output: { path: __dirname+"/dist", filename: "bundle.js" }, watch: true } 12345678 12345678

    Babel配置

    Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法,以便在现在有的环境执行之前的代码。  首先安装basel。

    npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev 1 1

    执行安装完成后需要将之前的webpack.config.js修改为:

    module.exports = { entry: "./app.js", output: { path: __dirname+"/dist", filename: "bundle.js" }, module: { loaders: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } } ] }, resolve: { extensions: ['','.coffee','.js'] } } 12345678910111213141516171819202122 12345678910111213141516171819202122

    现在就能在文件里面以ES6的语法进行代码编写,如在app.js加入:

    var func = str => { console.log(str); }; func('Hello Babel!'); 1234 1234

    我们再次运行,如果看到输出,就说明配置成功了。这里有关Loader的知识和配置就不讲究了,大家可以网上补补。

    与React结合

    终端输入以下代码对react和react-dom进行安装:

    npm install react react-dom --save 1 1

    安装Babel针对React的预设插件:

    npm install babel-preset-react --save-dev 1 1

    由于我们增加了react的预设插件,所以需要对webpack.config.js进行修改。将module -> loaders下面的query修改如下:

    query: { presets: ['es2015','react'] } 123 123

    接下来我们创建一个hello.js.

    import React from "react"; class Hello extends React.Component{ render() { return ( <div> Hello, World! </div> ) } } export default Hello; 12345678910111213 12345678910111213

    在app.js做一下配置:

    import React from "react"; import ReactDOM from "react-dom"; import Hello from "./hello"; ReactDOM.render( <Hello />, document.querySelector('#app') ); 12345678 12345678

    哈哈哈,这里如果大家做过React Native的,这里是不是感觉很亲切,只不过React Native还是用的npm在做管理。我们同样启动服务在看看,如果看到Hello World!就说明环境配置成功。

    顶 相关资源:webpack 搭建react环境
    最新回复(0)