資訊專欄INFORMATION COLUMN
摘要：寫在前面準(zhǔn)備學(xué)習(xí)一下和相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個(gè)，參考了這個(gè)文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現(xiàn)在半成品的過程中，目前完成開發(fā)模式的相關(guān)操作，添加了按需加載的地步。
寫在前面
準(zhǔn)備學(xué)習(xí)一下react和webpack相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個(gè)，參考了這個(gè)文檔從零搭建React全家桶框架教程;步驟上都差不多
第一步，依賴總覽完成到我現(xiàn)在半成品的過程中，目前完成開發(fā)模式的相關(guān)操作，添加了babel,less,antd按需加載的地步。總體的package.json情況如下：
{
"name": "myreact",
"version": "1.0.0",
"description": "test react",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
},
"keywords": [
"test",
"react"
],
"author": "xxxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-import": "^1.8.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.3.4",
"style-loader": "^0.22.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"antd": "^3.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1"
}
}
暫時(shí)做到這些依賴，需要指出的是，webpack4和以前的版本可能有差別（不一定，或許是我沒有注意到）如果需要在scrpit屬性中配置，使用cli的方式運(yùn)行，就需要安裝webpack-cli，需要行內(nèi)命令行的方式運(yùn)行，就需要安裝webpack-command,當(dāng)然，一起安裝應(yīng)該也沒有什么問題。這里是和教程里面配置的不一樣的地方。
然后，webpack4需要指明模式production|development，所以我在dev中使用了--mode development這個(gè)參數(shù)。這也是教程中沒有提到的部分。
babel的相關(guān)依賴，有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0,這個(gè)是babel的相關(guān)依賴，等等，有人可能會(huì)看到babel-plugin-import沒有提到，這個(gè)模塊的用途是為了antd的按需加載的?？梢钥纯丛敿?xì)的babelrc文件：
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
以上是babel的配置，preset的值就是那三個(gè)模塊，至于作用，es2015是為了處理es6語法的，react是為了處理jsx語法的，stage-0是為了支持新特性的。
至于插件的配置，react-hot-loader/babel是為了熱更新，不丟失狀態(tài)，這點(diǎn)教程中已經(jīng)說到了。下邊的import這個(gè)，就是上邊提到的babel-plugin-import的配置，也是antd的按需加載，官方推薦的配置。
還需要提到一點(diǎn)，這里可能一些新特性還是支持不夠，比如async/await語法，可能需要再安裝babel-plugin-transform-runtime這個(gè)模塊，babelrc文件的plugins還需要配置"transform-runtime"這個(gè)插件進(jìn)去，以支持新特性。
依賴相關(guān)的就說到這里。
我這邊直接在根目錄下的config目錄創(chuàng)建了webpack.dev.config.js,具體的配置如下：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
/*入口*/
entry: ["react-hot-loader/patch",path.join(__dirname, "../src/index.js")],
/*輸出到dist文件夾，輸出文件名字為bundle.js*/
output: {
path: path.join(__dirname, "../dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "../dist"),
historyApiFallback: true
},
module: {
rules: [{
test: /.js[x]?$/,
use: ["babel-loader?cacheDirectory=true"],
include: path.join(__dirname, "../src")
},{
test: /.css$/,
use: ["style-loader","css-loader","postcss-loader"],
},
{
test: /.less$/,
use:[ "style-loader",
{loader: "css-loader",options:{importLoaders:1}},
"less-loader"],
}]
},
plugins:[new HtmlWebpackPlugin({
title:"react測(cè)試",
template:"./src/index.html",
filename:"./dist/index.html"
})],
devtool: "inline-source-map",
resolve:{
alias: {
"@":path.join(__dirname, "../src/")
}
}
};
這邊的配置就沒啥說的，基本上loader的配置，目前完成js(x)的處理，css/less的處理，和其他的常規(guī)cli配置，少了url-loader,file-loader，代碼分割這些功能。
完結(jié)差不多配置就是這樣，很簡(jiǎn)陋，功能也不齊全，需要完成的工作還有很多。不過自己動(dòng)手，豐衣足食……
項(xiàng)目的github地址 diy-react-cli歡迎各位來串門喲！
這個(gè)項(xiàng)目還在不斷的完善中。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96926.html
摘要：只有動(dòng)手，你才能真的理解作者的構(gòu)思的巧妙只有動(dòng)手，你才能真正掌握一門技術(shù)持續(xù)更新中項(xiàng)目地址求求求源碼系列跟一起學(xué)如何寫函數(shù)庫中高級(jí)前端面試手寫代碼無敵秘籍如何用不到行代碼寫一款屬于自己的類庫原理講解實(shí)現(xiàn)一個(gè)對(duì)象遵循規(guī)范實(shí)戰(zhàn)手摸手，帶你用擼 Do it yourself!!! 只有動(dòng)手，你才能真的理解作者的構(gòu)思的巧妙 只有動(dòng)手，你才能真正掌握一門技術(shù) 持續(xù)更新中…… 項(xiàng)目地址 https...
摘要：有沒有辦法實(shí)現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實(shí)現(xiàn)局部熱加載，我們需要添加插件。 前言 用了3個(gè)多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運(yùn)工，對(duì)于vue的api使用到達(dá)了一定瓶頸，無奈水平有限，每每深入底層觀賞源碼時(shí)候都迷失了自己。 遂決定再找個(gè)框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限，加上本人早已對(duì)React、RN技術(shù)垂涎已久,于是決定找找教程來學(xué)習(xí)。無奈第一步就卡在了環(huán)境搭...
摘要：通過文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開始： 全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項(xiàng)目： $ create-react-app 開始項(xiàng)目： ...
摘要：通過文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開始： 全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項(xiàng)目： $ create-react-app 開始項(xiàng)目： ...
摘要：初體驗(yàn)從零開始重構(gòu)計(jì)算模塊從屬于筆者的前端入門與工程實(shí)踐，更多相關(guān)資料文章參考學(xué)習(xí)與實(shí)踐資料索引和學(xué)習(xí)與實(shí)踐資料索引。不過筆者也只是了解其概念而未真正付諸實(shí)踐，本文即是筆者在將我司某個(gè)簡(jiǎn)單項(xiàng)目中的計(jì)算模塊重構(gòu)為過程中的總結(jié)。 WebAssembly 初體驗(yàn)：從零開始重構(gòu)計(jì)算模塊從屬于筆者的 Web 前端入門與工程實(shí)踐，更多相關(guān)資料文章參考WebAssembly 學(xué)習(xí)與實(shí)踐資料索引和 ...
閱讀 1510·2023-04-26 01:28
閱讀 3325·2021-11-22 13:53
閱讀 1437·2021-09-04 16:40
閱讀 3198·2019-08-30 15:55
閱讀 2690·2019-08-30 15:54
閱讀 2498·2019-08-30 13:47
閱讀 3376·2019-08-30 11:27
閱讀 1157·2019-08-29 13:21
