分模組打包檔案
在生產環境中,我們應該盡量減小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陣列值對應。4、在根目錄執行webpack,結果在根目錄生成build資料夾,build資料夾裡面包含commonfile/common.js(react,react-dom),component/component.js(component元件),最終,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前端開發領域朝著規範開發的方向演進。體現在...