最近有個項目須要react,我尼瑪是個忠實的Vue黨,可是粑粑仍是粑粑,開始學習,本教程只適合於新手,或者學生黨javascript
主要是爲了熟悉react的目錄結構,指令什麼的,以及一些基礎的webpack,會有不少配置的東西php
mkdir react-demo // 新建項目文件夾 cd react-demo // cd到項目目錄下 npm init // npm初始化
webpack 的一些操做css
npm i webpack webpack-cli --save--dev touch webpack.config.js
webpack配置文件
html
/* * @Descripttion: webpack.config.js * @version: ON||FOR * @@Company: DCIT-SH * @Author: Oneself * @Date: 2020-11-27 16:37:06 * @LastEditors: Oneself * @LastEditTime: 2020-11-27 16:39:44 * @Statu: TODO: webpack配置文件 */ const path = require('path'); module.exports = { entry: './src/app.js', // 入口文件 output: { path: path.resolve(__dirname, 'dist'), // 定義輸出目錄 filename: 'bundle.js' // 定義輸出文件名稱 } };
package.json
添加webpack執行命令java
"scripts": { "build": "webpack --config webpack.config.js" }
由於咱們的入口文件是'./src/app.js',而咱們執行build的時候會先到入口文件,我感受的這個就像是thinkphp或者一些後端框架的 index.php,或者admin.php (意思上)而如今咱們並無入口文件,建立src目錄,建立app.jsnode
npm run build
在咱們的根目下會生成一個dist目錄
,一個bundle.js
react
webpack-dev-server是一個小型的node.js Express服務器,它使用webpack-dev-middleware中間件來爲經過webpack打包生成的資源文件提供Web服務。webpack
npm install --save-dev webpack-dev-server
package.json
更新命令git
"scripts": { "dev":"webpack-dev-server" }
添加配置
webpack.config.js新增devServer配置es6
devServer: { hot: true, // 熱替換 contentBase: path.join(__dirname, 'dist'), // server文件的根目錄 progress:true,//開啓進度條 compress: true, // 開啓gzip //open:true, //自動打開瀏覽器, port: 8080, // 端口 },
報錯 Cannot find module 'webpack-cli/bin/config-yargs'
這個錯誤格外的眼熟,剛學webpack時候就遇到過,
package.json
改爲以下版本
方法1:前提是你知道你依賴的版本
"webpack-dev-server": "^依賴版本" 刪除node_modules文件夾 npm i
方法2:最新版本
npm uninstall webpack-dev-server -g 卸載全局 npm uninstall webpack-dev-server -D 卸載局部(本地) npm install webpack-dev-server --save-dev 最新
方法3 看下之前項目的啓動版本
npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 webpack-dev-server -D
麻蛋的又報錯了
Error: spawn cmd.exe ENOENT
看到這個錯誤的時候,咱們就要考慮下, cmd.exe
定位錯誤的話,應該是咱們的電腦問題,通常是環境變量,
在後端的平常中,咱們會調用一些exe程序進行加密,拆解,拼圖,會由於你的exe文件沒有配置到電腦的環境變量,而找不到程序,
我查了下 cmd.exe是用戶環境變量中加入System32
添加環境變量
cmd.exe 在哪一個文件夾
C:\Windows\System32
仍是不行,我百度了下,須要重啓下電腦。我坲了
OK重啓後能夠正常啓動
說白就是html生成器,HTML模板插件 讓webpack 簡化了HTML文件的建立
HtmlWebPackPlugin
爲html文件中引入的外部資源如script、link動態添加每次compile後的hash,防止引用緩存的外部文件問題
能夠生成建立html入口文件,好比單頁面能夠生成一個html文件入口,配置N個html-webpack-plugin能夠生成N個頁面入口
npm install --save-dev html-webpack-plugin
webpack.config.js 添加配置 添加在 module.exports
// 引入html插件文件 const HtmlWebPackPlugin = require('html-webpack-plugin'); --------------------------- plugins: [ new HtmlWebPackPlugin({ // template是模板文件須要咱們建立 template: './public/index.html', filename: path.resolve(__dirname, 'dist/index.html'), minify: { //true不換行 collapseWhitespace: true }, hash: true //生產環境下生成hash戳 }) ] npm run dev
多頁面應用,我在網上看的時候,這個東西用的不是不少,可是有些面試題會問,多頁面應用說白了就是多個入口,和後端那些框架的設計模式差很少,
webpack.config.js
module.exports = { // 多入文件 entry: { index: "./src/index.js", // 前臺入口 admin: "./src/admin.js" // 後臺入口 }, output: { path: path.resolve(__dirname, 'dist'), // 定義輸出目錄 filename: '[name].js', // 定義輸出文件名稱 [name]自動獲取入口的home和admin, 將entry中的鍵提取出來 publicPath: "/" //build以後的公共路徑 }, plugins: [ new HtmlWebPackPlugin({ // template是模板文件須要咱們建立 template: './public/index.html', filename: path.resolve(__dirname, 'dist/index.html'), chunks:['index'],//只引用index.js,解決index.html裏面有index.js和admin.js的問題 minify: { //摺疊換行true不換行 collapseWhitespace: true }, hash: true //生產環境下生成hash戳 }), new HtmlWebPackPlugin({ // template是模板文件須要咱們建立 template: './public/admin.html', filename: path.resolve(__dirname, 'dist/admin.html'), chunks:['admin'],//只引用index.js,解決index.html裏面有index.js和admin.js的問題 minify: { //摺疊換行true不換行 collapseWhitespace: true }, hash: true //生產環境下生成hash戳 }) ] }
感受我註釋寫的很清楚了,簡單的說就是添加幾個辨別項,將單頁面轉化爲多頁面,記得根據入口文件新建文件entry
下如今是兩個入口文件
npm run build
在咱們指定的目錄下會生成dist
index.js index.html ,admin.js admin.js 可是我看到了警告,
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ε=(´ο`*)))唉,我給忘了一個mode,雖然不印象打包,可是仍是看着挺難受的,在 module.exports
中配置
//模式 默認兩種production(生產環境:代碼壓縮) development(開發環境:代碼不壓縮) mode: "development",
npm install --save-dev css-loader style-loader mini-css-extract-plugin
css-loader:解析@import這種語法
style-loader:把css插入到head標籤中
mini-css-extract-plugin:抽離css樣式讓index.html裏面的css樣式變成link引入
配置 webpack.config.js
let MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 在插件中引用 plugins: [ new MiniCssExtractPlugin({ filename: "static/css/main.css", }), ] // 在模塊中,配置不一樣的規則 module: { //規則 rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, //都放到了上面的main.css裏面 { loader: "css-loader", }, ], }, ], },
而後咱們測試下,看看是否將css引用了,在src目錄下新建assets目錄,新建兩個css文件,在index.js中
@import '你放置css的位置'
npm run dev /*就會發現,你寫的css已經加載到css中了, @import也能夠在css中使用,將公共的類,和當前css*/ npm run build /*就會生成對應配置的目錄結構 . static/css/main.css
css兼容性處理
npm install --save postcss-loader autoprefixer
webpack.config.js
// 在css 規則 中添加 一個新的postcss-loader規則 寫在css配置的use中 { loader: "postcss-loader" },
在根目錄下新建 postcss.config.js
配置瀏覽器建兼容
module.exports = { plugins: { 'autoprefixer': { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" ] } } };
打包後查看咱們的dist文件夾下css,自動生成css文件
-webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg);
webpack.config.js 配置會愈來愈大,位置會愈來愈多,建議學習下 webpack
npm install --save optimize-css-assets-webpack-plugin //引入css壓縮 let OptimizeCss = require("optimize-css-assets-webpack-plugin"); // 添加配置 optimization: { minimizer: [ new OptimizeCss(), //優化css ], },
須要配置mode模式
npm install --save uglifyjs-webpack-plugin //js壓縮 let UglifyjsPlugin=require('uglifyjs-webpack-plugin'); minimizer: [ //壓縮js new UglifyjsPlugin({ cache:true, //是否用緩存 parallel:true, //是否併發打包 sourceMap:true //es6映射es5須要用 }), ]
npm install --save-dev url-loader // 配置 module:{ rules: [ { test:/\.(png|jpg|gif|jpeg)$/, use:{ loader:"url-loader", //file-loader加載圖片,url-loader圖片小於多少k用base64顯示 options: { limit:100*1024, //小於100k用base64 //build以後的目錄分類 outputPath:'static/images' }, } }, ] }
npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime
npm i react react-dom --save npm i babel-preset-react --save-dev
安裝babe
npm install babel-loader@next @babel/core @babel/preset-react @babel/runtime --save
Babel 是一個工具鏈,主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法,以便可以運行在當前和舊版本的瀏覽器或其餘環境中。下面列出的是 Babel 能爲你作的事情:
webpack.config.js
module: { rules: [ { test: /\.(js | jsx)$/, // 由於react是jsx,須要添加jsx exclude: /node_modules/, use: { loader: "babel-loader", }, }, ], }, { "presets": ["@babel/preset-env", "@babel/preset-react"] }
更新index.js
import React from "react"; import ReactDOM from "react-dom"; class App extends React.Component{ render(){ return( <div>Hello React!</div> ) } } export default App; ReactDOM.render(<App />, document.getElementById("app"));
將index.js ReactDOM.render(<App />, document.getElementById("app"));
拋出的節點綁定到文件流中
更新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> 首頁 </title> </head> <body> <div id="app"> </div> </body> </html>
代碼
參考:
https://react.docschina.org/tutorial/tutorial.html
http://www.javashuo.com/article/p-bkzcbokn-ee.html
http://www.javashuo.com/article/p-vcphucwk-kb.html
----待更新