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

分模組打包檔案

在生產環境中，我們應該盡量減小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")
)

<< 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下。

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前端開發領域朝著規範開發的方向演進。體現在...