laravel+react+webpack+babel+gulp的配置

时间:2022-05-06
本文章向大家介绍laravel+react+webpack+babel+gulp的配置，主要内容包括laravel、npm、webpack.config.js、main.js、build、html、基本概念、基础应用、原理机制和需要注意的事项等，并结合实例形式分析了其使用技巧，希望通过本文能帮助到大家理解应用这部分内容。

laravel

composer create-project laravel/laravel --prefer-dist

npm

npm install gulp webpack -g
npm install react react-dom babel-loader babel-preset-es2015 babel-preset-react --save-dev

webpack.config.js

var path = require('path');
var config = {
 entry: path.resolve(__dirname, 'resources/assets/js/main.js'),
 output: {
 path: path.resolve(__dirname, 'public/js'),
 filename: 'bundle.js'
 },
 resolve: {
 extensions: ['', '.js', '.jsx']
 },
 module: {
 loaders: [
 {
 test: /.jsx?$/,
 exclude: /node_modules/,
 loader: 'babel',
 query: {
 presets: ['es2015', 'react']
 }
 }
 ]
 }
};
module.exports = config;

main.js

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(<h1>asd</h1>, document.getElementById('app'));

build

webpack -w

html

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>react</title>
</head>
<body>
<div id="app"></div>
<script src="js/bundle.js"></script>
</body>
</html>

随机文章
Javascript知识点必读
最近更新