前端webpack構建react系列三 分模組打包

2021-08-18 07:33:14 字數 2477 閱讀 6870

分模組打包檔案

在生產環境中,我們應該盡量減小js檔案的大小,將框架性的js裝載在乙個檔案中利用瀏覽器的快取機制節約載入資源耗費時間

分塊思路

1、react,react-dom這種由第三方維護的框架,一般不會進行更新。(真要更新就麻煩了,親身經歷,上級部門強制要求修復語言漏洞,硬逼著我們將某老專案php 5.6.x 更新到php7,這下有的忙了,一半多的**掛掉了。)

2、自己編寫的組建,公共方法,更新稍微頻繁一點。

3、業務邏輯**,隨著產品經理的心情變化起伏不定,有乙個充滿變數的更新頻率。

步驟1、我們在根目錄增加乙個component資料夾,用於編寫組建,在component資料夾內建立3個js檔案,分別是component1.js,component2.js,index.js

2、修改更目錄index.js。

<< index.js >>

import react, from 'react'

import from 'react-dom'

import from './component'

require("./css/main.css")

settimeout( () => ,5000)

class

boxextends

component

}render(

,document.getelementbyid("main")

)

3、修改webpack.config.js

<< webpack.config.js >>

var webpack = require("webpack");

var extracttextplugin = require('extract-text-webpack-plugin');

module.exports = ,

output: ,

module: ,,]

},plugins:[

new extracttextplugin('prefixer_main.css', ),

new webpack.optimize.commonschunkplugin()]}

(1)和(2)中的鍵名要和(3)中的name陣列值對應。

最終,webpack按照鍵名在output.path中生成相應的檔案。例如(1)中的值[『react』,』react-dom』]模組會被打包到output.path目錄下的commonfile/common.js中,(2)中的[『./component』] 模組會被打包到output.path下的component/component.js下。

4、在根目錄執行webpack,結果在根目錄生成build資料夾,build資料夾裡面包含commonfile/common.js(react,react-dom),component/component.js(component元件),

bundle.js(業務**)。prefixer_main.css(提取出的css檔案)。

5、將index.html改為

lang="en">

charset="utf-8">

indextitle>

rel="stylesheet"

href="./build/prefixer_main.css"

type="text/css" />

head>

id='main'>11div>

手動建立簡單webpack專案及React使用

1 執行 npm init y 快速初始化專案 2 在專案根目錄建立src的源 目錄和dist產品目錄 3 在src目錄下建立 index.html 4 使用cnpm 下安裝 webpack,執行cnpm i webpack webpack cli d 5 注意webpack 4.x 提供了 約定大...

webpack4構建前端專案

在使用webpack 4.x版本構建前端專案的時候,遇到了一些坑點,這裡做一下記錄,詳細內容見注釋。用於在構建前清除dist目錄中的內容 const cleanwebpackplugin require clean webpack plugin let basewebpackconfig modul...

前端構建 WebPack例項與前端效能優化

這篇主要介紹一下我在玩webpack過程中的心得。通過例項介紹webpack的安裝,外掛程式使用及載入策略。感受構建工具給前端優化工作帶來的便利。曾幾何時我們的js是這樣引入頁面的 曾幾何時,我們是如上圖的方式引入js資源的,相信現在很少遇見了。近年來web前端開發領域朝著規範開發的方向演進。體現在...