用webpack手動搭建react腳手架

2021-09-26 22:42:37 字數 1130 閱讀 1084

1.npm i webpack webpack-cli webpack-dev-server react react-dom -d

2. npm i babel-loader@7 babel-core babel-preset-es2015 babel-preset-react -d

3.在安裝完成後需要在webpack.config.js中的module.export中配置,**如下:

module: }}

]}

其中紅色部分與官網上的不一致,因為我們安裝的依賴有react和es2015,安裝這個主要是為了將react的語法轉換成瀏覽器可以識別的js**

4.熱更新需要:webpack-dev-server需要在package.json中的scripts中新增:「dev」:「webpack-dev-server」,在webpack.config.js中配置

devserver:
//port:1010可以更改埠號

專案需要跑起來,就需要第5步的配置完成不一定要build,但一定要配置。這樣直接在控制台中輸入npm run dev就可以啟動專案

5.將外部index檔案新增到dist中(也就是讓dist中生成index.html檔案),用到npm i html-webpack-plugin -d , plugin外掛程式,需要在webpack.config.js中新增var htmlwebpackplugin = require('html-webpack-plugin');和 var webpack=require('webpack')

在module.exports中新增

plugins: [

new htmlwebpackplugin(),

new webpack.hotmodulereplacementplugin()

]

6.安裝css外掛程式的依賴npm i css-loader style-loader -d

module.exports = 

]}}

}]

}

使用Webpack搭建乙個最基本的React環境

npm init包名隨意 填寫好之後一路按回車,直到資料夾內生成 package.json 檔案,在與package.json同級的目錄下新建乙個資料夾用於新建專案 由於node.js會自下而上的找包,所以我們把包安裝在最外層 也就是package.json同級目錄 讓node.js自己去找包,這樣...

手動搭建webpack4框架(二)

module 處理 css 檔案的 loader 處理 的 loader 處理 字型的 loader 處理 sass 檔案的 loader 處理 less 檔案的 loader 處理 vue 檔案的 loader babel plugin proposal class properties babe...

手動配置webpack

1.預設配置檔案的名字是 webpack.config.js webpack是node 寫出來的,所以寫node 語法 let path require path 自帶的 module.exports webpack.config.js是預設的配置名稱 或者webpackfile.js 如果要自己更...