webpack實現react打包
阿新 • • 發佈：2020-11-04
1、安裝配置babel
yarn add babel-loader @babel/core @babel/preset-env
2、webpack.config.js配置module
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
3、安裝react及react、react-dom
yarn add react react-dom @babel/preset-react
4、專案根目錄下新建.babelrl,裡面內容如下
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
5、在webpack配置的入口檔案中寫如下程式碼
import React,{Component} from 'react'
import ReactDom from 'react-dom'
class App extends Component{
render(){
return <div>我是react應用</div>
}
}
ReactDom.render(<App/>,document.querySelector('#root'))
6、webpack要引入HtmlWebpackPlugin,並配置有<div id=root></div>的html檔案為模板檔案
yarn add html-webpack-plugin
src/public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
main: './src/main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/public/index.html'
})
],
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].js'
}
}
7、webpack-dev-server開啟，頁面出現我是react應用則打包成功。