目錄結構
image
安裝的依賴
image
wepack.config.js
const path = require('path')
const webpack = require('webpack')
// 在瀏覽器中打開頁面需要引入
const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: path.join(__dirname, '../client/app.js'),
},
output: {
// []表示一個變量 hash如果有變動就刷新瀏覽器緩存 否則不刷新
filename: '[name].[hash].js',
// path.join根路徑下的絕對路徑 拼接處生成文件存放路徑
path: path.join(__dirname, '../dist'),
// 靜態資源引用時的路徑， 設置之后表示請求的是否是靜態資源
publicPath: ''
},
module: {
rules: [
{
test: /.jsx$/,
// babel 編輯es6， es7， es8， jsx 編譯成es5
// babel-loader只是一個插件并不包含babel核心代碼，還需要安裝babel-core
// 默認編譯es6，如何配置支持jsx, 新建文件.babelrc
loader: 'babel-loader'
},
// node_modules中的js代碼全部都是es5，所以不需要編譯了
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, '../node_modules')
]
}
]
},
plugins: [
// 生成一個html頁面，webpack編譯的時候把生成的所有entry都注入進去，路徑是根據output的路徑
new HTMLPlugin()
]
}
app.js
// 只要有jsx代碼就需要引入react。jsx代碼最終編譯出來是React.creaeElemnt()
import React from 'react'
//用來react組件渲染到dom中，還有react-native 是渲染到手機app中的
import ReactDOM from 'react-dom'
import App from './App.jsx'
// 直接掛在到body上，一般不建議這樣
ReactDOM.render(, document.body)
App.jsx
import React from 'react'
export default class App extends React.Component {
render() {
return (
This is App
)
}
}
.babelrc
{
"presets": [
// loose松散的
["es2015", {"loose": true}],
// 添加了react則支持編譯jsx語法
"react"
]
}
// 配置之后還需要安裝一些包
// babel-preset-es2015
// babel-preset-es2015-loose
// babel-preset-react
