摘要:相關鏈接詳細教程,從無到有搭建腳手架一配置插件,這兩個插件基本上是必配的了介紹每次打包時清理上次打包生成的目錄官網指南關于這個插件部分內容已經過時沒有更新,按照官網配置會出錯,所以參考上這個插件文檔來配置,文檔地址生成打
相關鏈接
webpack4詳細教程,從無到有搭建react腳手架(一)
配置插件 clean-webpack-plugin、 html-webpack-plugin, 這兩個插件基本上是必配的了 介紹clean-webpack-plugin - 每次打包時清理上次打包生成的目錄
官網指南關于這個插件部分內容已經過時沒有更新,按照官網配置會出錯,所以參考github上這個插件文檔來配置, 文檔地址: https://github.com/johnagan/c...
html-webpack-plugin - 生成打包文件中的 index.html
安裝yarn add clean-webpack-plugin html-webpack-plugin -D這兩個插件在兩種模式下都要用到,所以配置在common.js
config/webpack.common.js
... + const HtmlWebpackPlugin = require("html-webpack-plugin"); + const { CleanWebpackPlugin } = require("clean-webpack-plugin"); function webpackCommonConfigCreator(options){ ... return { ... plugins: [ + new HtmlWebpackPlugin(), + new CleanWebpackPlugin({ + cleanOnceBeforeBuildPatterns: [path.resolve(process.cwd(), "build/"), path.resolve(process.cwd(), "dist/")] + }), ] } } ...更改開發代碼,在頁面上插入一個元素
src/index.js
var ele = document.createElement("div"); ele.innerHTML = "hello webpack"; document.body.appendChild(ele);效果
yarn start, 效果:
yarn build, build目錄下生成index.html并且引入了bundle.js
接下來配置react
React 安裝reactyarn add react react-dom安裝babel
yarn add @babel/core @babel/cli @babel/preset-env -D yarn add @babel/preset-react -D yarn add babel-loader -D配置babel-loader
config/webpack.common.js
... function webpackCommonConfigCreator(options){ ... return { ... + module: { + rules: [ + { + test: /.(js|jsx)$/, + include: path.resolve(__dirname, "../src"), + use: [ + { + loader: "babel-loader", + options: { + presets: ["@babel/preset-react"], + } + } + ] + } + ] + }, ... } }準備基本的react文件
src/index.js
import React from "react"; import ReactDom from "react-dom"; import App from "./App.js"; ReactDom.render(, document.getElementById("root"));
src/App.js
import React from "react"; function App(){ return (App節點掛在在id為root的div上,而html-webpack-plugin插件默認生成的html沒有這個div, 所以需要配置插件使用我們定義的模板hello react) } export default App;
創建public/index.html
public/index.html
react webpack
config/webpack.common.js
... function webpackCommonConfigCreator(options){ ... return { ... plugins: [ - new HtmlWebpackPlugin(), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, "../public/index.html") + }), ... ] } }yarn start, 編譯正常 React模塊熱替換
開發模式下,改動代碼,瀏覽器將刷新頁面來更新改動,配置模塊熱替換,瀏覽器不刷新,而是通過dom操作來更新改動,對頻繁更新代碼的開發模式更加友好
安裝loaderyarn add react-hot-loader -D配置loader
config/webpack.common.js
... function webpackCommonConfigCreator(options){ ... return { ... module: { rules: [ { test: /.(js|jsx)$/, include: path.resolve(__dirname, "../src"), use: [ { loader: "babel-loader", options: { presets: ["@babel/preset-react"], + plugins: ["react-hot-loader/babel"], } } ] } ] }, ... } }修改react代碼
src/App.js
+ import {hot} from "react-hot-loader/root"; ... export default hot(App);開啟webpackDevServer熱加載
config/webpack.dev.js
... const config = { devServer: { contentBase: path.join(__dirname, "../dist"), + hot: true } } ...
相關鏈接
webpack4詳細教程,從無到有搭建react腳手架(三)
webpack4詳細教程,從無到有搭建react腳手架(四)
源碼github倉庫: https://github.com/tanf1995/W...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105478.html
摘要:是一個現代應用程序的靜態模塊打包器,前端模塊化的基礎。作為一個前端工程師切圖仔,非常有必要學習。官網的文檔非常的棒,中文文檔也非常給力,可以媲美的文檔。建議先看概念篇章,再看指南,然后看和配置總覽。 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器,前端模塊化的基礎。作為一個前端工程師(切圖仔),非常有必要學習。 showImg(https://segment...
摘要:相關鏈接詳細教程,從無到有搭建腳手架一詳細教程,從無到有搭建腳手架二詳細教程,從無到有搭建腳手架三管理打包后目錄結構打包結構如下修改配置通過相對目錄對資源命名前加上目錄名,效果后面的步驟在這里需要安裝一個大型的包,以為例安裝為第三 相關鏈接 webpack4詳細教程,從無到有搭建react腳手架(一) webpack4詳細教程,從無到有搭建react腳手架(二) webpack4詳細...
摘要:相關鏈接詳細教程,從無到有搭建腳手架一詳細教程,從無到有搭建腳手架二安裝配置創建,效果安裝配置創建效果配置模式修改配置現在編譯后的由動態內聯在中,需要分離到單獨的文件安裝插 相關鏈接 webpack4詳細教程,從無到有搭建react腳手架(一) webpack4詳細教程,從無到有搭建react腳手架(二) Css 安裝loader yarn add style-loader css...
摘要:寫在前面準備學習一下和相關的東西,官方的腳手架看起來太繁瑣,所以打算自己來搭建一個,參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步,依賴總覽完成到我現在半成品的過程中,目前完成開發模式的相關操作,添加了按需加載的地步。 寫在前面 準備學習一下react和webpack相關的東西,官方的腳手架看起來太繁瑣,所以打算自己來搭建一個,參考了這個文檔從零搭建React全家桶框架教程;...
摘要:今天就嘗試著一起來聊聊吧,旨在幫大家加深理解新手更容易上路,都能從到搭建配置自定屬于自己的腳手架,或對已封裝好的腳手架有進一步的鞏固,接下來蘇南會詳細講解中的每一個配置字段的作用部分為新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言 經常會有群友問起webpack、react、redux、甚至cre...
閱讀 2809·2021-10-08 10:04
閱讀 3198·2021-09-10 11:20
閱讀 523·2019-08-30 10:54
閱讀 3305·2019-08-29 17:25
閱讀 2301·2019-08-29 16:24
閱讀 884·2019-08-29 12:26
閱讀 1447·2019-08-23 18:35
閱讀 1930·2019-08-23 17:53