国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack-best-practice-最佳實(shí)踐-部署生產(chǎn)

txgcwm / 1789人閱讀

摘要:如果是在生產(chǎn)環(huán)境下,則加入插件,執(zhí)行代碼壓縮,并且去除。規(guī)定了在開發(fā)環(huán)境下才使用。疑問目前為止,對于多頁面項(xiàng)目還是沒有找到一個很好的方案去構(gòu)建自動化。原文可以看我的博客最佳實(shí)踐部署生產(chǎn)

tip

webpack的入門篇可以看我的這一片博文。
《如何使用webpack—webpack-howto》.

前言

最近一段時間在項(xiàng)目中使用了webpack和React來開發(fā),總之來說也是遇到了許多坑,webpack畢竟還是比較新的技術(shù),而且也很難有一個很好的構(gòu)建案例來適應(yīng)所有的項(xiàng)目,總之,在看了許多項(xiàng)目demo和官方文檔以及官方推薦的tutorials之后,也算是自己總結(jié)出的一套最佳實(shí)踐吧。

代碼

代碼可以在我的Github上。
可以戳這里~~。

package.json 命令配置

既然是需要用到的是實(shí)際項(xiàng)目的構(gòu)建,那么必然就要考慮開發(fā)環(huán)境和生產(chǎn)環(huán)境下的配置項(xiàng)了:

// package.json
{
  // ...
  "scripts": {
    "build": "webpack --progress --colors --watch",
    "watch": "webpack-dev-server --hot --progress --colors",
    "dist": "NODE_ENV=production webpack --progress --colors"
  },
  // ...
}

可以在目錄下執(zhí)行

npm run build
npm run watch
npm run dist

解釋一下:

build 是在我們開發(fā)環(huán)境下執(zhí)行的構(gòu)建命令;

watch 也是在開發(fā)環(huán)境下執(zhí)行,但是加了webpack最強(qiáng)大的功能--搭建靜態(tài)服務(wù)器和熱插拔功能(這個在后面介紹;

dist 是項(xiàng)目在要部署到生產(chǎn)環(huán)境時打包發(fā)布。

dist 里面的NODE_ENV=production是聲明了當(dāng)前執(zhí)行的環(huán)境是production-生產(chǎn)環(huán)境

后面跟著幾個命令:

--colors 輸出的結(jié)果帶彩色

--progress 輸出進(jìn)度顯示

--watch 動態(tài)實(shí)時監(jiān)測依賴文件變化并且更新

--hot 是熱插拔

--display-error-details 錯誤的時候顯示更多詳細(xì)錯誤信息

--display-modules 默認(rèn)情況下 node_modules 下的模塊會被隱藏,加上這個參數(shù)可以顯示這些被隱藏的模塊

-w 動態(tài)實(shí)時監(jiān)測依賴文件變化并且更新

-d 提供sorcemap

-p 對打包文件進(jìn)行壓縮

目錄結(jié)構(gòu)

現(xiàn)在前端模塊化的趨勢導(dǎo)致目錄結(jié)構(gòu)也發(fā)生了很大的改變和爭議,這只是我自己用到的一種形式,可以參考。

.
├── app                 #開發(fā)目錄
|   ├──assets           #存放靜態(tài)資源
|   |   ├──datas        #存放數(shù)據(jù) json 文件
|   |   ├──images       #存放圖片資源文件
|   |   └──styles       #存放全局sass變量文件和reset文件
|   ├──lib
|   |   ├──components   #存放數(shù)據(jù) 模塊組件 文件
|   |   |   └──Header
|   |   |       ├──Header.jsx
|   |   |       └──Header.scss
|   |   |       
|   |   └──utils        #存放utils工具函數(shù)文件
|   |
|   └──views
|       ├──Index        #入口文件
|       |   ├──Index.html #html文件
|       |   ├──Index.jsx
|       |   └──Index.scss
|       └──Index2
├── dist                #發(fā)布目錄
├── node_modules        #包文件夾
├── .gitignore     
├── .jshintrc      
├── webpack.config.js   #webpack配置文件
└── package.json

具體可以到Github上看demo。

webpack.config.js 引入包
var webpack = require("webpack");
var path = require("path");
var fs = require("fs");

這個毋庸置疑吧。

判斷是否是在當(dāng)前生產(chǎn)環(huán)境

定義函數(shù)判斷是否是在當(dāng)前生產(chǎn)環(huán)境,這個很重要,一位開發(fā)環(huán)境和生產(chǎn)環(huán)境配置上有一些區(qū)別

var isProduction = function () {
  return process.env.NODE_ENV === "production";
};
聲明文件夾
// 定義輸出文件夾
var outputDir = "./dist";
// 定義開發(fā)文件夾
var entryPath = "./app/views";
定義插件
var plugins = [
  new webpack.optimize.CommonsChunkPlugin({
    name: "commons",
    filename: "js/commons.js",
  }),
  new webpack.ProvidePlugin({
    React: "react",
    ReactDOM: "react-dom",
    reqwest: "reqwest",
  }),
];
if( isProduction() ) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      test: /(.jsx|.js)$/,
      compress: {
        warnings: false
      },
    })
  );
}

CommonsChunkPlugin 插件可以打包所有文件的共用部分生產(chǎn)一個commons.js文件。

ProvidePlugin 插件可以定義一個共用的入口,比如下面加的 React ,他會在每個文件自動require了react,所以你在文件中不需要 require("react"),也可以使用 React。

如果是在生產(chǎn)環(huán)境下,則加入插件 UglifyJsPlugin ,執(zhí)行代碼壓縮,并且去除 warnings。

自動遍歷多文件入口
var entris = fs.readdirSync(entryPath).reduce(function (o, filename) {
    !/./.test(filename) &&
    (o[filename] = "./" + path.join(entryPath, filename, filename + ".jsx"));
    return o;
  }, {}
);

函數(shù)會自動遍歷開發(fā)的入口文件夾下面的文件,然后一一生產(chǎn)入口并且返回一個對象--入口。

如果在這一步不需要多頁面多入口

那么可以使用html-webpack-plugin插件,它可以自動為入口生成一個html文件,配置如下:

var HtmlWebpackPlugin = require("html-webpack-plugin");
plugins.push(new HtmlWebpackPlugin({
  title: "index",
  filename: outputDir+"/index.html",  #生成html的位置
  inject: "body",                     #插入script在body標(biāo)簽里
}));

entry 就可以自定義一個入口就夠了

config的具體配置
var config = {
  target: "web",
  cache: true,
  entry: entris,
  output: {
    path: outputDir,
    filename: "js/[name].bundle.js",
    publicPath: isProduction()? "http://******" : "http://localhost:3000",
  },
  module: {
    loaders: [
      {
        test: /(.jsx|.js)$/,
        loaders: ["babel?presets[]=es2015&presets[]=react"],
        exclude: /node_modules/
      },
      {
        test: /.scss$/,
        loaders: ["style", "css?root="+__dirname, "resolve-url", "sass"]
      },
      {
        test: /.json$/,
        loader: "json",
      },
      {
        test: /.(jpe?g|png|gif|svg)$/,
        loader: "url?limit=1024&name=img/[name].[ext]"
      },
      {
        test: /.(woff2?|otf|eot|svg|ttf)$/i,
        loader: "url?name=fonts/[name].[ext]"
      },
      {
        test: /.html$/,
        loader: "file?name=views/[name].[ext]"
      },
    ]
  },
  plugins: plugins,
  resolve: {
    extensions: ["", ".js", "jsx"],
  },
  devtool: isProduction()?null:"source-map",
};

這里來一一說明:

對于output

path和filename都不用多說了,path是生成文件的存放目錄,filename是文件名,當(dāng)然可以在前面加上目錄位置。
這里提醒一下,filename 的相對路徑就是 path了,并且下面 靜態(tài)文件生成的filename也是相對于這里的path的,比如 image 和 html。
publicPath 的話是打包的時候生成的文件鏈接,比如 圖片 資源,
如果是在生產(chǎn)環(huán)境當(dāng)然是用服務(wù)器地址,如果是開發(fā)環(huán)境就是用本地靜態(tài)服務(wù)器的地址。

module loaders 打包加載的處理器

可以不用夾 loader了 比如 原來 url-loader 現(xiàn)在 url

js/jsx
{
  test: /(.jsx|.js)$/,
  loaders: ["babel?presets[]=es2015&presets[]=react"],
  exclude: /node_modules/
},

對于js文件和jsx文件用了babel來處理,這里注意一下,最新版本的babel吧es2015和react的處理分開了,所有要這么寫。

處理scss文件
{
  test: /.scss$/,
  loaders: ["style", "css?root="+__dirname, "resolve-url", "sass"]
},

這里用了sass、css、style的loader這不用多說了。
那么root和resolve-url是怎么回事呢,root是定義了scss文件里面聲明的url地址是相對于根目錄的,然后resolve-url回去相對解析這個路徑,而不用require去獲取,比如

background: url("./assets/images/webpack.png");

這樣就可以加載到./assets/images/webpack.png這個文件,而不用使用相對路徑和require

處理json文件
{
  test: /.json$/,
  loader: "json",
},

對于json文件,可以自動請求該模塊并且打包。

處理 圖片 字體 資源文件
{
  test: /.(jpe?g|png|gif|svg)$/,
  loader: "url?limit=1024&name=img/[name].[ext]"
},
{
  test: /.(woff2?|otf|eot|svg|ttf)$/i,
  loader: "url?name=fonts/[name].[ext]"
},

這里使用了 url 這個loader,但是url依賴 file-loader,它是對file-loader的二次封裝。
在請求圖片的時候如果文件大小小于 1024k ,使用內(nèi)聯(lián) base64 URLs,否則會自動導(dǎo)入到name所聲明的目錄,這里是相對之前聲明的 outputDir 路徑。
字體資源也是一樣。

處理html文件
{
  test: /.html$/,
  loader: "file?name=views/[name].[ext]"
},

在多頁面的項(xiàng)目中需要,可以自動吧html文件導(dǎo)入到指定的生產(chǎn)文件夾下。

resolve
resolve: {
  extensions: ["", ".js", "jsx"],
},

是可以忽略的文件后綴名,比如可以直接require("Header");而不用加.jsx。

devtool
devtool: isProduction()?null:"source-map",

規(guī)定了在開發(fā)環(huán)境下才使用 source-map。

疑問

目前為止,對于多頁面項(xiàng)目還是沒有找到一個很好的方案去構(gòu)建自動化。

原文可以看我的博客 webpack-best-practice-最佳實(shí)踐-部署生產(chǎn);

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/78249.html

相關(guān)文章

  • 談?wù)?react-router

    摘要:談?wù)勛罱褂玫膩黹_發(fā)項(xiàng)目,感覺確實(shí)是爽的飛起,然而總感覺還是少了點(diǎn)什么。注意當(dāng)前版本依賴的是請不要安裝最新版。同樣的也有這個方法表示在離開路由前執(zhí)行。會深度優(yōu)先遍歷整個理由配置來尋找一個與給定的相匹配的路由。配置是建立在之上的。 談?wù)?最近使用的 React + webpack 來開發(fā)項(xiàng)目,感覺確實(shí)是爽的飛起,然而總感覺還是少了點(diǎn)什么。對,是多頁面,每次請求頁面還要后端路由給你?多不爽...

    MASAILA 評論0 收藏0
  • 數(shù)據(jù)中心監(jiān)控最佳實(shí)踐簡化軟件選擇

    摘要:不同組織的專業(yè)人員將對網(wǎng)絡(luò)監(jiān)控軟件有不同的需求。網(wǎng)絡(luò)監(jiān)控軟件必須有效地收集有關(guān)總消耗帶寬傳輸數(shù)據(jù)包數(shù)量和數(shù)據(jù)包錯誤發(fā)生率的信息。這可以預(yù)防維護(hù)性能瓶頸和維護(hù)數(shù)據(jù)中心監(jiān)控最佳實(shí)踐。衡量指標(biāo)是保持?jǐn)?shù)據(jù)中心正常運(yùn)行的必要條件。使用監(jiān)控軟件和最佳實(shí)踐,管理人員可以簡化工作流程,并獲得可用的數(shù)據(jù)。監(jiān)控功能是數(shù)據(jù)中心管理的關(guān)鍵部分,尤其是IT管理人員每天負(fù)責(zé)的組件數(shù)量。監(jiān)控軟件提供的工具可以簡化任務(wù),并...

    william 評論0 收藏0
  • 贏得Docker挑戰(zhàn)最佳實(shí)踐

    摘要:因此,將應(yīng)用程序部署到生產(chǎn)需要數(shù)周或數(shù)月。它將改變應(yīng)用程序開發(fā)過程,但某些挑戰(zhàn)必須克服從而使得企業(yè)獲得最大好處。平臺將促進(jìn)的發(fā)展,并且?guī)椭渎男凶约旱某兄Z。 showImg(https://segmentfault.com/img/bVpNBt); 難怪Docker正在迅速發(fā)展。Docker,一個開源項(xiàng)目。僅僅兩年,Docker價(jià)值近10億美元,最近獲得了9500萬美元的資金。令人激動...

    fou7 評論0 收藏0
  • Kubernetes 落地案例|在線課程平臺 Descomplica 使用 Kubernetes 5

    摘要:使用這個工具是由的幾個人創(chuàng)建的。它最厲害的地方在于,在下,使用,這對于我們來說有利無弊。在我們的這個案例中,我們添加集群層面的日志記錄,攝取應(yīng)用程序日志到,用和進(jìn)行集群監(jiān)控,基于的授權(quán)認(rèn)證,以及一些其它的事情。 在過去一年內(nèi),Descomplica 計(jì)劃往核心組件服務(wù)化的方向發(fā)展,我們一開始使用 Elastic Beanstalk 將這些服務(wù)編排到 AWS。 那時候來說,這個決定是明智...

    hzc 評論0 收藏0
  • Kubernetes部署最佳安全實(shí)踐

    摘要:將成安全評估如漏洞掃描加入持續(xù)集成中,使其成為構(gòu)建流程的一部分。持續(xù)集成應(yīng)確保只使用審查通過的代碼來構(gòu)建鏡像。我們推薦這篇文章中提到的安全實(shí)踐,將的靈活配置能力加入到持續(xù)集成中,自動將安全性無縫融合到整個流程中。 編者按:本文是由 Aqua Security 的Amir Jerbi 和Michael Cherny 所寫,基于他們從本地和云端上收集到的實(shí)際數(shù)據(jù),描述了Kubernetes...

    Rocture 評論0 收藏0

發(fā)表評論

0條評論

txgcwm

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<