第一步、基礎環境
初始化
項目初始化
npm init -y
安裝webpack
npm i webpack
安裝react
npm i react react-dom -s
項目基礎框架
入口文件(src/index.js)
import React from 'react'import {render} from 'react-dom'import App from './App'render(<App/>,document.getElementById('root'))主組件(src/App.js)
import React,{Component} from 'react'class App extends Component{ constructor(){ super() } redner(){ return( <div> App Module </div> ) }} webpack.config.js
const path = require('path')const StyleLintPlugin = require('stylelint-webpack-plugin')const STYLELINTENABLE = truemodule.exports = { mode:'development', entry:'./src/index.js', output:{ path:path.resolve(__dirname,'build'), filename:'bundle.js' }, module:{ rules:[ //處理js/jsx { test://.jsx?/i, use:{ loader:'bebel-loader', options:{ presets:['@babel/preset-react'] } } }, //處理css { test://.css$/i, use:['style-loader','css-loader',{ loader:'postcss-loader', options:{ plugins:require('autoprefixer') } }] }, //處理圖片資源 { test://.(png|jpg|gif)$/i, use:{ loader:'url-loader', options:{ outputPath:'imgs/', limit:10*1024 } } }, //處理字體文件 { test://.(eot|svg|ttf|woof|woof2)$/i, use:{ loader:'url-loader', options:{ outputPath:'fonts/', limit:10*1024 } } }, //less { test://.less$/i, use:['style-loader','css-loader','less-loader'] }, ] }, devtool:'source-map', plugins:[ ...STYLELINTENABLE ?[ new StyleLintPlugin({ files:['**/*.css','**/*.less','**/*.js','**/*.html','**/*.vue','**/*.scss'] }) ]:[] ]}webpack.config.js
"stylelint": { "extends": "stylelint-config-standard" }, "browserslist":[ "> 0.5%",//市場占有率大于百分之零點5 "last 2 version",//最后兩個版本 "not dead"//還沒有die ]以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
